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

package/dist/Components/Header/Header.js

@@ -36,42 +36,47 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var Sidebar_1 = require("../../Constants/Sidebar");
-var lucide_react_1 = require("lucide-react");
-var react_2 = __importStar(require("react"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
-var mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
-var Header = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors, boxShadow = _a.boxShadow, onMobileMenuClose = _a.onMobileMenuClose;
-    var _m = (0, react_1.useDisclosure)(), isOpen = _m.isOpen, onOpen = _m.onOpen, onClose = _m.onClose;
-    var _o = (0, react_2.useState)(null), hoveredMenu = _o[0], setHoveredMenu = _o[1];
-    var themeColor = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var bg = (_b = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _b !== void 0 ? _b : (_c = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _c === void 0 ? void 0 : _c[700];
-    var color = (_d = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _d !== void 0 ? _d : (_e = themeColor === null || themeColor === void 0 ? void 0 : themeColor.background) === null || _e === void 0 ? void 0 : _e[100];
-    var activeBg = (_f = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _f !== void 0 ? _f : (_g = themeColor === null || themeColor === void 0 ? void 0 : themeColor.primary) === null || _g === void 0 ? void 0 : _g[400];
-    var hoverBg = (_h = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _h !== void 0 ? _h : (_j = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _j === void 0 ? void 0 : _j[500];
-    var hoverText = (_k = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _k !== void 0 ? _k : (_l = themeColor === null || themeColor === void 0 ? void 0 : themeColor.text) === null || _l === void 0 ? void 0 : _l[600];
-    var isActive = function (href) { return href && active === href; };
-    var closeMobileMenu = function () {
+exports.pickActiveAccent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Sidebar_1 = require("../../Constants/Sidebar");
+const lucide_react_1 = require("lucide-react");
+const react_2 = __importStar(require("react"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const color_1 = require("../../Theme/tokens/builders/color");
+const desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
+const mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
+/** Non-text UI accent (WCAG 1.4.11, >=3:1) — the underline/highlight, not running text. */
+const ACTIVE_ACCENT_TARGET = 3;
+// NOTE: sidebar canvas never inverts but primary can be either mode-shaped — direction is detected from primary's own data, not the canvas.
+const pickActiveAccent = (primary, canvas) => {
+    const runsDarkToLight = (0, color_1.relativeLuminance)(primary[50]) < (0, color_1.relativeLuminance)(primary[900]);
+    const order = runsDarkToLight
+        ? [500, 600, 700, 800, 900]
+        : [500, 400, 300, 200, 100, 50];
+    const found = order.find((rung) => (0, color_1.contrastRatio)(primary[rung], canvas) >= ACTIVE_ACCENT_TARGET);
+    return primary[found !== null && found !== void 0 ? found : order[order.length - 1]];
+};
+exports.pickActiveAccent = pickActiveAccent;
+/** Sticky top bar with logo, page links, hover dropdowns and a collapsible mobile menu; colours default to the sidebar tokens. */
+const Header = ({ logo, menuItems, rightSlot, active, colors, boxShadow, onMobileMenuClose }) => {
+    var _a, _b, _c, _d, _e;
+    const { isOpen, onOpen, onClose } = (0, react_1.useDisclosure)();
+    const [hoveredMenu, setHoveredMenu] = (0, react_2.useState)(null);
+    const { colors: themeColor } = (0, useCustomTheme_1.useCustomTheme)();
+    const bg = (_a = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _a !== void 0 ? _a : themeColor.sidebar.background[500];
+    const color = (_b = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _b !== void 0 ? _b : themeColor.white;
+    const activeBg = (_c = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _c !== void 0 ? _c : themeColor.sidebar.activeIcon;
+    const hoverBg = (_d = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _d !== void 0 ? _d : themeColor.sidebar.background[400];
+    const hoverText = (_e = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _e !== void 0 ? _e : themeColor.white;
+    const isActive = (href) => href && active === href;
+    const closeMobileMenu = () => {
         onClose();
         onMobileMenuClose === null || onMobileMenuClose === void 0 ? void 0 : onMobileMenuClose();
     };
-    var rightSlotWithApi = react_2.default.isValidElement(rightSlot)
-        ? react_2.default.cloneElement(rightSlot, { closeMobileMenu: closeMobileMenu })
+    const rightSlotWithApi = react_2.default.isValidElement(rightSlot)
+        ? react_2.default.cloneElement(rightSlot, { closeMobileMenu })
         : rightSlot;
-    return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky" },
-        react_2.default.createElement(react_1.Flex, { h: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start" },
-            react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center" },
-                react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
-                react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })),
-            react_2.default.createElement(react_1.Spacer, null),
-            react_2.default.createElement(react_1.HStack, { spacing: 3, align: "center" },
-                react_2.default.createElement(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" } }, rightSlotWithApi),
-                react_2.default.createElement(react_1.HStack, { spacing: 2, display: { base: "flex", md: "none" } }, rightSlotWithApi),
-                react_2.default.createElement(react_1.IconButton, { variant: "unstyled", icon: react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full" }, isOpen ? react_2.default.createElement(lucide_react_1.X, { size: 20 }) : react_2.default.createElement(lucide_react_1.MenuIcon, { size: 20 })), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen }))),
-        react_2.default.createElement(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlotWithApi, onClose: closeMobileMenu })));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: "sticky", position: "sticky", top: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { minH: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 6, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { cursor: "pointer", children: logo }), (0, jsx_runtime_1.jsx)(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText, surface: bg })] }), (0, jsx_runtime_1.jsx)(react_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: { base: 2, md: 4 }, children: rightSlotWithApi }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { variant: "unstyled", icon: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), (0, jsx_runtime_1.jsx)(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, surface: bg, onClose: closeMobileMenu })] }));
 };
 exports.default = Header;

package/dist/Components/Header/HeaderActions.d.ts

@@ -1,23 +1,44 @@
-import React from "react";
 import { OptionProp } from "../Select/SelectProps";
-declare const HeaderActions: ({ select, edit, create, }: {
+/** Row of optional header controls (select, edit, create) separated by dividers; each renders only when its flag is set. */
+declare const HeaderActions: ({ select, edit, create, surface, }: {
+    /** Background this is drawn on. Header's bar is dark in BOTH modes — pass it there. */
+    surface?: string;
+    /** Optional select shown at the start of the row. */
     select?: {
+        /** Renders the select only when true. */
         isSelect?: boolean;
+        /** Options of the select; empty when omitted. */
         options?: OptionProp[];
+        /** Called with the chosen option. */
         onSelectChange?: (option?: OptionProp) => void;
+        /** Placeholder of the select; also its accessible name when `ariaLabel` is not set. */
         selectPlaceholderText?: string;
+        /** Accessible name for the select; defaults to the placeholder text. */
+        ariaLabel?: string;
+        /** False renders the themed popup, which looks identical on Windows and macOS; a native select's list is OS-drawn. */
+        native?: boolean;
+        /** CSS width of the select wrapper; defaults to "12.5rem". */
         width?: string;
+        /** Value of the selected option. */
         value?: string;
     };
+    /** Optional text button with a pencil icon. */
     edit?: {
+        /** Renders the button only when true. */
         isEditable?: boolean;
+        /** Called when the button is pressed. */
         onEdit?: () => void;
+        /** Button text; defaults to "Edit Layout". */
         label?: string;
     };
+    /** Optional text button with a plus icon. */
     create?: {
+        /** Renders the button only when true. */
         isCreatable?: boolean;
+        /** Called when the button is pressed. */
         onCreate?: () => void;
+        /** Button text; defaults to "Create New". */
         label?: string;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default HeaderActions;

package/dist/Components/Header/HeaderActions.js

@@ -3,36 +3,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var Select_1 = __importDefault(require("../Select/Select"));
-var Divider_1 = __importDefault(require("../Divider/Divider"));
-var HeaderActions = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var select = _a.select, edit = _a.edit, create = _a.create;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var elements = [];
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = __importDefault(require("react"));
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const Select_1 = __importDefault(require("../Select/Select"));
+const Divider_1 = __importDefault(require("../Divider/Divider"));
+const surfaceFocusRing_1 = require("../Common/surfaceFocusRing");
+/** Row of optional header controls (select, edit, create) separated by dividers; each renders only when its flag is set. */
+const HeaderActions = ({ select, edit, create, surface, }) => {
+    var _a, _b, _c;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    const ink = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, accentText_1.AA_NORMAL_TEXT);
+    const iconInk = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, outlineRung_1.AA_NON_TEXT);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(canvas, iconInk);
+    const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
-        elements.push(react_2.default.createElement(react_1.Box, { key: "select", width: (_b = select.width) !== null && _b !== void 0 ? _b : "12.5rem" },
-            react_2.default.createElement(Select_1.default, { key: "select", options: (_c = select.options) !== null && _c !== void 0 ? _c : [], placeholder: select.selectPlaceholderText, onChange: function (option) { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value })));
+        elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push(react_2.default.createElement(react_1.Box, { key: "edit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); } },
-            react_2.default.createElement(lucide_react_1.SquarePen, { size: 16, color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[500] }),
-            react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, edit.label ? edit.label : "Edit Layout")));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: focusShadow, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push(react_2.default.createElement(react_1.Box, { key: "create", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); } },
-            react_2.default.createElement(lucide_react_1.CirclePlus, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[500] }),
-            react_2.default.createElement(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _g === void 0 ? void 0 : _g[500] },
-                " ",
-                create.label ? create.label : "Create New",
-                " ")));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: focusShadow, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
-    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem" }, elements.map(function (el, i) { return (react_2.default.createElement(react_2.default.Fragment, { key: i },
-        i > 0 && react_2.default.createElement(Divider_1.default, null),
-        el)); })));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), el] }, i))) }));
 };
 exports.default = HeaderActions;

package/dist/Components/Header/HeaderProps.d.ts

@@ -1,48 +1,88 @@
+/** Horizontal top bar with page-link nav + submenus — for a user-avatar dropdown bar instead, use NavigationBar. */
 type SubItem = {
+    /** Dropdown entry text; also its React key, so keep it unique within the parent. */
     label: string;
+    /** Only compared with Header's `active` to highlight — never navigates; route in `onClick`. */
     href: string;
+    /** Small badge above the label; colorScheme defaults to "blue". */
     badge?: {
+        /** Badge text. */
         label: string;
+        /** Chakra colour scheme of the badge; the tint is resolved against the bar background. */
         colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
     };
+    /** Also closes the mobile menu when tapped there. */
     onClick?: () => void;
 };
 type MenuItemProp = {
+    /** Top-level entry text; also its React key and what the hover dropdown is keyed on, so keep it unique. */
     label: string;
+    /** Only compared with Header's `active` to highlight — never navigates; route in `onClick`. */
     href?: string;
+    /** Small badge above the label; colorScheme defaults to "blue". */
     badge?: {
+        /** Badge text. */
         label: string;
+        /** Chakra colour scheme of the badge; the tint is resolved against the bar background. */
         colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
     };
+    /** Also closes the mobile menu; with `children`, fires on desktop only — mobile tap just toggles. */
     onClick?: () => void;
+    /** Opens as a hover-only dropdown on desktop (no click/keyboard trigger) — a click-toggled accordion on mobile instead. */
     children?: SubItem[];
 };
+/** Props for Header, the horizontal top bar; use NavigationBar for a user-avatar dropdown instead. */
 export type HeaderProps = {
+    /** Brand mark at the left of the bar; any click handling is yours to attach. */
     logo: React.ReactNode;
+    /** Top-level entries in order; an entry with `children` becomes a dropdown (desktop) or accordion (mobile). */
     menuItems: MenuItemProp[];
+    /** Mounted once, in the bar; a valid element also receives a `closeMobileMenu` prop. */
     rightSlot?: React.ReactNode;
+    /** The `href` of the item to highlight; matched by strict equality. */
     active?: string;
+    /** Overrides the sidebar-token defaults; `active` is the underline/highlight colour, not text. */
     colors?: {
+        /** Bar background. */
         bg: string;
+        /** Default text and icon colour. */
         color: string;
+        /** Underline on the active top-level item and fill behind the active sub-item. */
         active: string;
+        /** Background of an item under the pointer. */
         hover: string;
+        /** Text colour of an item under the pointer; defaults to white. */
         hoverTextColor?: string;
     };
+    /** Overrides the default "md" shadow. */
     boxShadow?: string;
+    /** Fires after the mobile menu closes via toggle, item tap, or `closeMobileMenu`. */
     onMobileMenuClose?: () => void;
 };
+/** Internal props for Header's desktop nav row; not meant for consumers. */
 export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
+    /** Called with the hovered item's label, or null on pointer leave; only items with children trigger it. */
     setHoveredMenu: (menu: string | null) => void;
+    /** True when an `href` matches Header's `active`. */
     isActive: (href?: string) => boolean | "" | undefined;
+    /** Underline or fill colour of the active item. */
     activeBg: string;
+    /** Label of the item whose dropdown is open, or null. */
     hoveredMenu: string | null;
+    /** Background of an item under the pointer. */
     hoverBg: string;
+    /** Default text colour. */
     color: string;
+    /** Text colour of an item under the pointer. */
     hoverTextColor?: string;
+    /** The bar's own background — badges resolve their tint against this, never the light canvas default. */
+    surface: string;
 };
-export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
+/** Internal props for Header's collapsible mobile menu panel; not meant for consumers. */
+export type MobileMenuProps = Pick<HeaderProps, 'menuItems'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg' | 'surface'> & {
+    /** Expands the panel; collapsing it also closes any open submenu. */
     isOpen: boolean;
+    /** Called after a leaf item is tapped, so the host can collapse the panel. */
     onClose?: () => void;
 };
 export {};

package/dist/Components/Header/components/desktopMenu.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { DesktopMenuProps } from "../HeaderProps";
-declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }: DesktopMenuProps) => React.JSX.Element;
+/** Desktop nav row of Header: ghost buttons with hover dropdowns for items that have children. */
+declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor, surface, }: DesktopMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DesktopMenu;

package/dist/Components/Header/components/desktopMenu.js

@@ -1,43 +1,32 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var react_2 = __importDefault(require("react"));
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var DesktopMenu = function (_a) {
-    var menuItems = _a.menuItems, rightSlot = _a.rightSlot, setHoveredMenu = _a.setHoveredMenu, isActive = _a.isActive, activeBg = _a.activeBg, hoveredMenu = _a.hoveredMenu, hoverBg = _a.hoverBg, color = _a.color, hoverTextColor = _a.hoverTextColor;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    return (react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem" }, menuItems.map(function (item) {
-        var _a, _b, _c, _d;
-        var hasChildren = !!item.children;
-        var isHovered = hoveredMenu === item.label;
-        return (react_2.default.createElement(react_1.Box, { key: item.label, position: "relative", onMouseEnter: function () { return hasChildren && setHoveredMenu(item.label); }, onMouseLeave: function () { return hasChildren && setHoveredMenu(null); } },
-            react_2.default.createElement(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 }) : undefined, 
-                // bg={isActive(item.href) ? activeBg : "transparent"}
-                borderBottom: "2px solid ".concat(isActive(item.href) ? activeBg : "transparent"), borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: isActive(item.href) ? activeBg : color },
-                react_2.default.createElement(react_1.VStack, { spacing: 0 },
-                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
-                        // backdropFilter="saturate(180%) blur(6px)"
-                        // bg="whiteAlpha.800"
-                        // color="gray.800"
-                        px: 2, py: 0.5 }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
-                    react_2.default.createElement(react_1.Text, null, item.label))),
-            hasChildren && (react_2.default.createElement(react_1.Collapse, { in: isHovered, animateOpacity: true },
-                react_2.default.createElement(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10 },
-                    react_2.default.createElement(react_1.Stack, { spacing: 1, p: 2 }, (_d = item.children) === null || _d === void 0 ? void 0 : _d.map(function (subItem) {
-                        var _a, _b, _c, _d;
-                        return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor } },
-                            react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "md", boxShadow: "sm", 
-                                    // backdropFilter="saturate(180%) blur(6px)"
-                                    // bg="whiteAlpha.800"
-                                    // color="gray.800"
-                                    px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
-                                react_2.default.createElement(react_1.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[800], _hover: { color: hoverTextColor } }, subItem.label))));
-                    })))))));
-    })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+/** Desktop nav row of Header: ghost buttons with hover dropdowns for items that have children. */
+const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor, surface, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const badgeTone = (scheme) => (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);
+    return ((0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem", children: menuItems.map((item) => {
+            var _a, _b;
+            const hasChildren = !!item.children;
+            const isHovered = hoveredMenu === item.label;
+            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", onMouseEnter: () => hasChildren && setHoveredMenu(item.label), onMouseLeave: () => hasChildren && setHoveredMenu(null), children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }) : undefined, 
+                        // `activeBg` is the rail's 3:1 non-text accent; label ink stays on `color`.
+                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: color, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = item.badge) === null || _a === void 0 ? void 0 : _a.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }), hasChildren && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isHovered, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "100%", bg: colors.surfaceRaised, color: colors.text[900], rounded: "xl", shadow: "md", minW: "10rem", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 1, p: 2, children: (_b = item.children) === null || _b === void 0 ? void 0 : _b.map((subItem) => {
+                                    var _a;
+                                    return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(subItem.badge.colorScheme).bg, color: badgeTone(subItem.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = subItem.badge) === null || _a === void 0 ? void 0 : _a.label })), (0, jsx_runtime_1.jsx)(react_1.Text
+                                                // NOTE: text[800] is tuned for background[50], not activeBg — onFilled picks a clearing ink instead.
+                                                , { 
+                                                    // NOTE: text[800] is tuned for background[50], not activeBg — onFilled picks a clearing ink instead.
+                                                    color: isActive(subItem.href)
+                                                        ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                                        : colors.text[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));
+                                }) }) }) }))] }, item.label));
+        }) }));
 };
 exports.default = DesktopMenu;

package/dist/Components/Header/components/mobileMenu.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { MobileMenuProps } from "../HeaderProps";
-declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }: MobileMenuProps) => React.JSX.Element;
+/** Collapsible mobile nav panel of Header; items with children toggle an inline submenu. */
+declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, surface, onClose, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MobileMenu;

package/dist/Components/Header/components/mobileMenu.js

@@ -3,61 +3,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var lucide_react_1 = require("lucide-react");
-var MobileMenu = function (_a) {
-    var menuItems = _a.menuItems, isOpen = _a.isOpen, isActive = _a.isActive, hoverBg = _a.hoverBg, activeBg = _a.activeBg, color = _a.color, rightSlot = _a.rightSlot, onClose = _a.onClose;
-    var _b = react_2.default.useState(null), openMenuLabel = _b[0], setOpenMenuLabel = _b[1];
-    react_2.default.useEffect(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = __importDefault(require("react"));
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+/** Collapsible mobile nav panel of Header; items with children toggle an inline submenu. */
+const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, surface, onClose, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const badgeTone = (scheme) => (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);
+    const [openMenuLabel, setOpenMenuLabel] = react_2.default.useState(null);
+    react_2.default.useEffect(() => {
         if (!isOpen)
             setOpenMenuLabel(null);
     }, [isOpen]);
-    return (react_2.default.createElement(react_1.Collapse, { in: isOpen, animateOpacity: true },
-        react_2.default.createElement(react_1.Box, { pb: 4, display: { md: "none" } },
-            react_2.default.createElement(react_1.Stack, { spacing: 4 },
-                menuItems.map(function (item) {
-                    var _a, _b, _c, _d, _e;
-                    return item.children ? (react_2.default.createElement(react_1.Box, { key: item.label, px: 2 },
-                        react_2.default.createElement(react_1.Button, { onClick: function () {
-                                return setOpenMenuLabel(function (prev) { return (prev === item.label ? null : item.label); });
-                            }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some(function (subItem) { return isActive(subItem.href); })
-                                ? activeBg
-                                : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16 })), px: 2 },
-                            react_2.default.createElement(react_1.HStack, { w: "full", justify: "space-between", align: "center" },
-                                react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
-                                        // backdropFilter="saturate(180%) blur(6px)"
-                                        // bg="whiteAlpha.800"
-                                        // color="gray.800"
-                                        px: 2, py: 0.5 }, item.badge.label)),
-                                    react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, item.label)))),
-                        react_2.default.createElement(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true },
-                            react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1, spacing: 1 }, item.children.map(function (subItem) {
-                                var _a, _b, _c;
-                                return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: function () {
+    return ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { pb: 4, display: { md: "none" }, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 4, children: menuItems.map((item) => {
+                    var _a;
+                    return item.children ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: item.children.some((subItem) => isActive(subItem.href))
+                                    ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                    : color, bg: item.children.some((subItem) => isActive(subItem.href))
+                                    ? activeBg
+                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 700, children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
                                         var _a;
-                                        (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
-                                        onClose === null || onClose === void 0 ? void 0 : onClose();
-                                    }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
-                                    react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                        subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
-                                            // backdropFilter="saturate(180%) blur(6px)"
-                                            // bg="whiteAlpha.800"
-                                            // color="gray.800"
-                                            px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
-                                        react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center" },
-                                            react_2.default.createElement(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }),
-                                            react_2.default.createElement(react_1.Text, { fontSize: "sm" }, subItem.label)))));
-                            }))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
-                        react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                            item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
-                                // backdropFilter="saturate(180%) blur(6px)"
-                                // bg="whiteAlpha.800"
-                                // color="gray.800"
-                                px: 2, py: 0.5 }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
-                            react_2.default.createElement(react_1.Text, null, item.label))));
-                }),
-                rightSlot && react_2.default.createElement(react_1.Box, { mt: 4 }, rightSlot)))));
+                                        return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
+                                                var _a;
+                                                (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
+                                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                            }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(subItem.href)
+                                                ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                                : color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(subItem.badge.colorScheme).bg, color: badgeTone(subItem.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = subItem.badge) === null || _a === void 0 ? void 0 : _a.label })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                    }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(item.href)
+                            ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                            : color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = item.badge) === null || _a === void 0 ? void 0 : _a.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
+                }) }) }) }));
 };
 exports.default = MobileMenu;

package/dist/Components/IconButton/IconButton.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentWithAs } from "@chakra-ui/react";
+import type { IconButtonProps } from "./IconButtonProps";
+export declare const UNNAMED_ICON_BUTTON_WARNING = "[pixelize-design-library] IconButton: no aria-label or aria-labelledby, so screen readers announce it as an unnamed button.";
+declare const _default: ComponentWithAs<"button", IconButtonProps>;
+export default _default;

package/dist/Components/IconButton/IconButton.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNNAMED_ICON_BUTTON_WARNING = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+// NOTE: Chakra omits a missing aria-label at runtime; only its type insists on one.
+const UnlabelledChakraIconButton = react_2.IconButton;
+exports.UNNAMED_ICON_BUTTON_WARNING = "[pixelize-design-library] IconButton: no aria-label or aria-labelledby, so screen readers announce it as an unnamed button.";
+const useUnnamedWarning = (isUnnamed) => {
+    const warned = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (process.env.NODE_ENV === "production" || !isUnnamed || warned.current)
+            return;
+        warned.current = true;
+        console.warn(exports.UNNAMED_ICON_BUTTON_WARNING);
+    }, [isUnnamed]);
+};
+const IconButton = (0, react_1.forwardRef)(function IconButton(props, ref) {
+    var _a, _b;
+    useUnnamedWarning(!((_a = props["aria-label"]) === null || _a === void 0 ? void 0 : _a.trim()) && !((_b = props["aria-labelledby"]) === null || _b === void 0 ? void 0 : _b.trim()));
+    return (0, jsx_runtime_1.jsx)(UnlabelledChakraIconButton, { ref: ref, ...props });
+});
+exports.default = (0, react_1.memo)(IconButton);

package/dist/Components/IconButton/IconButtonProps.d.ts

@@ -0,0 +1,11 @@
+import type { IconButtonProps as ChakraIconButtonProps } from "@chakra-ui/react";
+import type { DataAttributes } from "../Common/dataAttributes";
+/** Every Chakra `IconButtonProps` prop, with the same theme `Button` look; only `aria-label` is relaxed to optional. */
+export interface IconButtonProps extends Omit<ChakraIconButtonProps, "aria-label">, DataAttributes {
+    /** The button's accessible name. Optional in the type, but dev builds warn once per mount when it and `aria-labelledby` are both missing. */
+    "aria-label"?: string;
+    /** Swaps the icon for a spinner inside the same box, and disables the button until it clears. */
+    isLoading?: boolean;
+    /** A square on Button's own scale: xs 24 · sm 32 (default) · md 40 · lg 48 · xl 56, with no padding. */
+    size?: ChakraIconButtonProps["size"];
+}

package/dist/Components/IconButton/IconButtonProps.js

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

package/dist/Components/Input/PhoneNumberInput.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { PhoneNumberInputProps } from "./PhoneNumberInputProps";
-declare const PhoneNumberInput: ({ size, value, codeValueReturn, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => React.JSX.Element;
+/** Country-code-aware phone field with a flag/dial-code prefix; `ref` forwards to the number `<input>`. */
+declare const PhoneNumberInput: import("react").ForwardRefExoticComponent<PhoneNumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default PhoneNumberInput;