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

package/dist/Components/Drawer/Drawer.js

@@ -21,13 +21,27 @@ const DrawerFooter = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.DrawerFooter = DrawerFooter;
-function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant = "solid", children, }) {
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// Matches by type one Fragment deep, so `<>{cond && <DrawerFooter>...</DrawerFooter>}</>` isn't dropped.
+const findSlot = (children, slot) => {
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === react_1.default.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
+function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }) {
+    var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerHeader);
-    const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerBody);
-    const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerFooter);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { bg: colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), header && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", children: header })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { children: body && body }), footer && (0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
+    const headerSlot = findSlot(children, exports.DrawerHeader);
+    const bodySlot = findSlot(children, exports.DrawerBody);
+    const footerSlot = findSlot(children, exports.DrawerFooter);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot }))] })] }));
 }

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -1,7 +1,21 @@
-import { DrawerProps as ChakraDrawerProps } from "@chakra-ui/react";
-export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant"> & {
+import { DrawerProps as ChakraDrawerProps, DrawerContentProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from "@chakra-ui/react";
+/** Only DrawerHeader/Body/Footer children render, matched by type one fragment deep; any other sibling is dropped. */
+export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant" | "initialFocusRef" | "finalFocusRef" | "closeOnOverlayClick" | "closeOnEsc"> & {
+    /** Defaults to "xl". */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    /** Defaults to "right". */
     placement?: "top" | "right" | "bottom" | "left";
+    /** @deprecated Typo of `variant`, kept as an alias; `variant` wins if both are set. */
     vaiant?: "solid" | "outline" | "ghost" | "link";
     children?: React.ReactNode;
+    /** Spread onto DrawerContent, e.g. to set width or padding. */
+    contentProps?: DrawerContentProps;
+    /** Drops the built-in close button, for a drawer dismissed only by its own footer action. */
+    hideCloseButton?: boolean;
 };
+/** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered DrawerHeader; omit to keep theme defaults. Chakra's Drawer reuses Modal's header part internally. */
+export type DrawerHeaderSlotProps = ModalHeaderProps;
+/** Chakra style props (padding, gap, sx, ...) spread onto the rendered DrawerBody; omit to keep theme defaults. */
+export type DrawerBodySlotProps = ModalBodyProps;
+/** Chakra style props (padding, borderTop, gap, sx, ...) spread onto the rendered DrawerFooter; omit to keep theme defaults. */
+export type DrawerFooterSlotProps = ModalFooterProps;

package/dist/Components/Dropdown/DropDown.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { DropdownProps } from "./DropdownProps";
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use `Select`. */
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;

package/dist/Components/Dropdown/DropDown.js

@@ -6,25 +6,40 @@ const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
-// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
 const SIZE_MAP = {
-    xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
-    sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
-    md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
-    lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
-    xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
+    xs: { btn: "xs", img: "1rem", chevron: controlSizes_1.CONTROL_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
+    sm: { btn: "sm", img: "1rem", chevron: controlSizes_1.CONTROL_SIZES.sm.iconSize, minW: "9rem", gap: 2, rowSize: "sm" },
+    md: { btn: "md", img: "1.125rem", chevron: controlSizes_1.CONTROL_SIZES.md.iconSize, minW: "11rem", gap: 2, rowSize: "md" },
+    lg: { btn: "lg", img: "1.25rem", chevron: controlSizes_1.CONTROL_SIZES.lg.iconSize, minW: "12rem", gap: 2.5, rowSize: "lg" },
+    xl: { btn: "lg", img: "1.4rem", chevron: 20, minW: "13rem", gap: 3, rowSize: "lg" },
 };
+const TRIGGER_TRANSITION = (0, motion_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]);
+const ROW_TRANSITION = (0, motion_1.transitionFor)(["background-color", "color"]);
+const CHEVRON_TRANSITION = (0, motion_1.transitionFor)(["transform"], "base");
+const isTypeaheadKey = (e) => e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey;
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use `Select`. */
 const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
-    var _a, _b;
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { isOpen, onOpen, onToggle, onClose } = (0, react_2.useDisclosure)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
     const dropdownRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [menuPos, setMenuPos] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
-    const s = (_b = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "md"]) !== null && _b !== void 0 ? _b : SIZE_MAP.md;
+    const s = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "sm"];
+    const rowSpec = (0, optionRowSizes_1.optionRowSpec)(s.rowSize);
+    const prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
     const menuId = (0, react_1.useId)();
     // Roving-tabindex keyboard nav for the menu (ARIA APG menu-button pattern):
     // real DOM focus moves through the items, so no aria-activedescendant is needed.
@@ -42,14 +57,22 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     const openAndFocus = (index) => {
         var _a;
         if (isOpen) {
-            // Already open (trigger still holds focus, e.g. after Enter/Space) — the
-            // portal is already mounted, so focus directly; no need to wait a frame,
-            // and the effect below only reacts to isOpen *changing* anyway.
+            // NOTE: already open — portal is already mounted, so focus directly, no frame wait needed.
             setActiveIndex(index);
             (_a = itemRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
         }
         else {
             pendingFocusIndex.current = index;
+            requestExclusiveOpen();
+            onOpen();
+        }
+    };
+    const handleToggle = () => {
+        if (isOpen) {
+            onClose();
+        }
+        else {
+            requestExclusiveOpen();
             onOpen();
         }
     };
@@ -59,9 +82,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             pendingFocusIndex.current = null;
             if (idx !== null) {
                 setActiveIndex(idx);
-                // Chakra's <Portal> mounts its children a tick after this effect runs
-                // (it resolves its target node via its own effect first), so the menu
-                // item ref isn't attached yet here — a frame gets us past that.
+                // NOTE: Chakra's Portal mounts children a tick late, so the item ref isn't attached yet — a frame gets past that.
                 requestAnimationFrame(() => { var _a; return (_a = itemRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus(); });
             }
         }
@@ -87,16 +108,13 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             onClose();
         }
         else if (e.key === "Enter" || e.key === " ") {
-            // Explicit rather than relying on native button activation: the text
-            // trigger is a styled Flex (no default action to rely on), and jsdom's
-            // `fireEvent` does not simulate a real browser's Enter/Space-activates-
-            // button default action either.
+            // NOTE: explicit — the trigger is a styled Flex with no native button activation to rely on.
             e.preventDefault();
-            onToggle();
+            handleToggle();
         }
     };
     const handleMenuKeyDown = (e) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (options.length === 0)
             return;
         if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -125,6 +143,15 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         else if (e.key === "Tab") {
             onClose();
         }
+        else if (isTypeaheadKey(e)) {
+            const char = e.key.toLowerCase();
+            const order = options.map((_, i) => (activeIndex + 1 + i) % options.length);
+            const match = order.find((i) => options[i].label.toLowerCase().startsWith(char));
+            if (match !== undefined) {
+                setActiveIndex(match);
+                (_d = itemRefs.current[match]) === null || _d === void 0 ? void 0 : _d.focus();
+            }
+        }
     };
     const handleItemKeyDown = (e, optionId, optionLabel) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -133,9 +160,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             focusTrigger();
         }
     };
-    // The menu is portaled to <body> (so it sits above everything). Anchor it to
-    // the trigger, then clamp to the viewport so it never overflows off-screen
-    // (e.g. when the trigger sits near the right or bottom edge).
+    // NOTE: menu is portaled to body — anchor to the trigger, then clamp to viewport so it never overflows.
     const updateMenuPos = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (!dropdownRef.current)
@@ -206,32 +231,35 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         if (node)
             updateMenuPos();
     };
-    const Chevron = isVisibleIconShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevron }) })) : undefined;
+    const Chevron = isVisibleIconShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
-        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
+        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: TRIGGER_TRANSITION, ...(0, motion_2.reducedMotionSx)(), ...dropDownButtonStyle }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
+        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: rowSpec.fontSize, fontWeight: 500, color: theme.colors.text[700], borderRadius: "md", transition: ROW_TRANSITION, _hover: { color: theme.colors.accentText }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(theme.colors), ...(0, motion_2.reducedMotionSx)() }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
-        var _a;
-        return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
+        const hoverTint = rowBackgrounds.active;
+        return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.surfaceRaised, border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: theme.shadows.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
                     itemRefs.current[index] = node;
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
                     focusTrigger();
-                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
-                    bg: theme.colors.primary.opacity[8],
+                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: rowSpec.mx, px: rowSpec.px, py: rowSpec.py, minH: rowSpec.minH, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, display: "flex", alignItems: "center", gap: rowSpec.gap, fontSize: rowSpec.fontSize, cursor: "pointer", color: theme.colors.text[700], transition: ROW_TRANSITION, _hover: {
+                    bg: hoverTint,
                     color: theme.colors.accentText,
                 }, _focus: {
-                    bg: theme.colors.primary.opacity[8],
+                    bg: hoverTint,
+                    color: theme.colors.accentText,
+                    outline: "none",
+                }, _focusVisible: {
+                    bg: hoverTint,
                     color: theme.colors.accentText,
+                    boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
                     ? `0.063rem solid ${theme.colors.boxborder[200]}`
-                    : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
-                        // fontWeight={400}
-                        style: LabelStyle, children: option.label })] }, option.id))) }));
+                    : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...(0, motion_2.reducedMotionSx)() }, style: ItemStyle, fontWeight: 500, children: [option.image && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: rowSpec.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: prefersReducedMotion ? false : { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
 });
 Dropdown.displayName = "Dropdown";
 exports.default = Dropdown;

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -1,23 +1,38 @@
 import { ButtonProps } from "@chakra-ui/react";
+/** Action-menu Dropdown (role="menu"): rows fire an action, nothing is "selected" or persisted. For picking a value use `Select`. */
 export type DropdownProps = {
+    /** Rendered only for the default dropdownType="button" — has no effect under dropdownType="text" (use `text` there). */
     ButtonText?: string;
     options: Option[];
+    /** Fires on click, Enter or Space; the menu closes and focus returns to the trigger. */
     handleOptionSelect: (id: string | number, label: string) => void;
+    /** "button" renders a filled primary button; "text" a plain-text trigger. Defaults to "button". */
     dropdownType?: "button" | "text";
+    /** Trigger label for dropdownType="text" only; ignored for "button" (use `ButtonText`). */
     text?: string;
+    /** Leading icon inside the trigger, before the label; works with both trigger types. */
     DropdownIcon?: JSX.Element;
+    /** Styles the trigger — merged into `sx` for "button", inline `style` for "text". */
     dropDownButtonStyle?: React.CSSProperties;
+    /** Shows the rotating chevron on the trigger. Defaults to true. */
     isVisibleIconShow?: boolean;
+    /** Spread last onto the "button" trigger, so it can override size/colorScheme; ignored for "text". */
     buttonProps?: ButtonProps;
+    /** Inline style on the portaled, fixed-position menu wrapper. */
     headStyle?: React.CSSProperties;
+    /** Inline style on the menu list (the bordered, scrolling panel). */
     ListStyle?: React.CSSProperties;
+    /** Inline style on every menu row. */
     ItemStyle?: React.CSSProperties;
+    /** Inline style on each row's label text. */
     LabelStyle?: React.CSSProperties;
+    /** Inline style on each row's `image` icon; ignored for options without one. */
     ImageStyle?: React.CSSProperties;
-    /** Overall size of the trigger + options (like Button sizes). */
+    /** Trigger + menu size on the shared control scale; defaults to `sm`. `xl` renders an `lg` trigger. */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** @deprecated Use `size` instead. Kept for backward compatibility. */
     optionsSize?: "sm" | "md" | "lg";
+    /** Draws a separator line between menu rows. */
     divider?: boolean;
     /** Accessible name for the trigger when it renders icon-only (no `ButtonText`/`text`). */
     ariaLabel?: string;
@@ -25,6 +40,7 @@ export type DropdownProps = {
 type Option = {
     id: string | number;
     label: string;
+    /** Icon component reference (e.g. `Star`), not a rendered element like `<Star />` — passed to Chakra's `as`. */
     image?: React.ElementType;
 };
 export {};

package/dist/Components/Editor/Editor.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { EditorProps } from "./EditorProps";
+/** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
 declare const Editor: React.NamedExoticComponent<EditorProps>;
 export default Editor;

package/dist/Components/Editor/Editor.js

@@ -39,6 +39,7 @@ const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const joditThemeVars_1 = require("./joditThemeVars");
+const joditAccessibility_1 = require("./joditAccessibility");
 // Loaded on render, not on import: jodit-react's browser bundle touches `self` at module
 // scope, which crashes any Node/SSR consumer importing this package's barrel.
 const JoditEditor = react_1.default.lazy(async () => {
@@ -46,6 +47,7 @@ const JoditEditor = react_1.default.lazy(async () => {
     const mod = (await Promise.resolve().then(() => __importStar(require("jodit-react"))));
     return { default: ((_a = mod.default) !== null && _a !== void 0 ? _a : mod) };
 });
+/** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
 const Editor = react_1.default.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,
@@ -58,6 +60,8 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
     const stableConfig = (0, react_1.useMemo)(() => ({
         theme: (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "default",
         popupRoot,
+        // Off by default, Jodit ships every toolbar button unreachable by keyboard.
+        allowTabNavigation: true,
         // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
         // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
         // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
@@ -71,6 +75,15 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
     // feeds our actual active colors into those variables, scoped to this instance (see
     // `joditThemeVars.ts`).
     const themeVars = (0, react_1.useMemo)(() => (0, joditThemeVars_1.getJoditThemeVars)(theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [theme]);
+    // Jodit rebuilds its own toolbar DOM (resize, mode change), so re-run on every mutation.
+    (0, react_1.useEffect)(() => {
+        if (!popupRoot)
+            return;
+        (0, joditAccessibility_1.applyJoditAccessibilityFixes)(popupRoot);
+        const observer = new MutationObserver(() => (0, joditAccessibility_1.applyJoditAccessibilityFixes)(popupRoot));
+        observer.observe(popupRoot, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [popupRoot]);
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: themeVars, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }) }));
 });
 exports.default = Editor;

package/dist/Components/Editor/EditorProps.d.ts

@@ -1,7 +1,9 @@
 import type JoditEditor from "jodit-react";
 import type { ComponentProps } from "react";
 type JoditEditorProps = ComponentProps<typeof JoditEditor>;
+/** Props for the lazy-loaded Jodit wrapper; a `config.theme`/`config.popupRoot` you pass overrides this library's own dark-mode fix. */
 export type EditorProps = Pick<JoditEditorProps, "value" | "config" | "className" | "onChange" | "onBlur"> & {
+    /** `key` is dead (React reserves it, never reaches Jodit); `editorRef.current` stays null until the lazy chunk loads. */
     editorRef?: JoditEditorProps["ref"];
     key?: string | number;
 };

package/dist/Components/Editor/joditAccessibility.d.ts

@@ -0,0 +1 @@
+export declare const applyJoditAccessibilityFixes: (root: ParentNode) => void;

package/dist/Components/Editor/joditAccessibility.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyJoditAccessibilityFixes = void 0;
+// Jodit puts aria-label on the listitem wrapper, not the real inner <button> — fixes that here.
+const applyJoditAccessibilityFixes = (root) => {
+    root.querySelectorAll('[role="trigger"]').forEach((el) => {
+        el.removeAttribute("role");
+        el.setAttribute("aria-hidden", "true");
+    });
+    root.querySelectorAll("[role=\"listitem\"]").forEach((item) => {
+        const label = item.getAttribute("aria-label");
+        const parent = item.parentElement;
+        if (parent && !parent.hasAttribute("role")) {
+            parent.setAttribute("role", "list");
+        }
+        if (!label)
+            return;
+        const button = item.querySelector('button, [role="button"]');
+        if (button && !button.hasAttribute("aria-label")) {
+            button.setAttribute("aria-label", label);
+        }
+    });
+    root.querySelectorAll(".jodit-toolbar-editor-collection").forEach((toolbar) => {
+        if (!toolbar.hasAttribute("role"))
+            toolbar.setAttribute("role", "toolbar");
+    });
+};
+exports.applyJoditAccessibilityFixes = applyJoditAccessibilityFixes;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,2 +1,3 @@
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -4,15 +4,10 @@ exports.default = VerifyEmailOtp;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const lucide_react_1 = require("lucide-react");
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
 function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { borderRadius: "md", border: "0.063rem solid", 
-                        // [800], not [300]: WCAG 1.4.11 needs >=3.0 for a control boundary against any
-                        // named surface up to `muted` (lightest); [300] fails there, [800] clears all
-                        // with margin.
-                        borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
-                            borderColor: theme.colors.primary[500],
-                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
 }

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -1,10 +1,14 @@
+/** Props for the full OTP verification card (icon, title, resend link); for a bare input in your own layout use PinInput. */
 export type VerifyEmailOtpProps = {
     resendMail: () => void;
     onChange: (value: string) => void;
+    /** Fires once all `pins` cells are filled — a `pins` value that doesn't match the actual OTP length blocks or truncates completion. */
     onComplete: (value: string) => void;
     placeholder?: string;
+    /** Typed as required, but the implementation silently defaults to 5 if a caller bypasses the type and omits it. */
     pins: number;
     title: string;
+    /** A second, hardcoded line — "your new Pixel Account" — is always appended below this text; there's no prop to remove it. */
     description: string;
     isDisabled?: boolean;
     isInvalid?: boolean;

package/dist/Components/EmptyState/EmptyState.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { EmptyStateProps } from "./EmptyStateProps";
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
 declare const EmptyState: React.FC<EmptyStateProps>;
 export default EmptyState;

package/dist/Components/EmptyState/EmptyState.js

@@ -5,38 +5,49 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("@emotion/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/chakra/motion");
 const float = (0, react_2.keyframes) `
   0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
+  50% { transform: translateY(-0.5rem); }
 `;
 const sizeMap = {
-    sm: { badge: "48px", icon: 20, title: "0.95rem", desc: "0.8rem", gap: 2, pad: 6 },
-    md: { badge: "72px", icon: 30, title: "1.1rem", desc: "0.9rem", gap: 3, pad: 10 },
-    lg: { badge: "96px", icon: 40, title: "1.35rem", desc: "1rem", gap: 4, pad: 14 },
+    sm: { badge: "3rem", icon: 20, title: "0.9375rem", desc: "0.8125rem", gap: 2, pad: 6 },
+    md: { badge: "4.5rem", icon: 30, title: "1.125rem", desc: "0.875rem", gap: 3, pad: 10 },
+    lg: { badge: "6rem", icon: 40, title: "1.375rem", desc: "1rem", gap: 4, pad: 14 },
 };
+const HALO_OPACITY = 0.33;
 const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
     ? colors[scheme]
     : scheme === "gray"
         ? colors.gray
         : colors.semantic[scheme];
-const EmptyState = ({ title = "No data found", description, icon: IconComp = lucide_react_1.Inbox, image, size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "240px", sx, }) => {
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
+const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = lucide_react_1.Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];
     const palette = scaleFor(theme.colors, colorScheme);
-    const accent = palette[500];
-    const accentSoft = palette[50];
+    const tone = (0, tone_1.resolveSoftTone)(theme.colors, palette, theme.colors.background[50]);
+    const accentSoft = tone.bg;
+    const accent = tone.fg;
     const containerStyles = variant === "subtle"
-        ? { bg: theme.colors.gray[50], borderRadius: "2xl" }
+        ? { bg: theme.colors.background[50], borderRadius: "xl" }
         : variant === "dashed"
             ? {
-                border: "2px dashed",
-                borderColor: theme.colors.gray[200],
-                borderRadius: "2xl",
+                border: "0.125rem dashed",
+                borderColor: theme.colors.boxborder[200],
+                borderRadius: "xl",
                 bg: "transparent",
             }
             : {};
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: image, alt: title, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: {
-                    boxShadow: `0 0 0 8px ${accentSoft}55`,
-                }, children: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.title, fontWeight: 600, color: theme.colors.gray[800], mt: 1, children: title }), description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.desc, color: theme.colors.gray[500], mt: 1, maxW: "380px", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: (0, motion_1.reducedMotionSx)() })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, position: "relative", isolation: "isolate", _before: {
+                    content: '""',
+                    position: "absolute",
+                    inset: "-0.5rem",
+                    borderRadius: "full",
+                    bg: accentSoft,
+                    opacity: HALO_OPACITY,
+                    zIndex: -1,
+                }, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
 };
 exports.default = EmptyState;

package/dist/Components/EmptyState/EmptyStateProps.d.ts

@@ -1,16 +1,23 @@
 import { ElementType, ReactNode } from "react";
 import { BoxProps } from "@chakra-ui/react";
+/** Controls badge/icon size, type scale, and spacing together. */
 export type EmptyStateSize = "sm" | "md" | "lg";
+/** Palette used to tint the icon badge — brand scale or semantic tone. */
 export type EmptyStateColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "success" | "error" | "warning" | "info";
+/** Props for the centered empty/zero-data placeholder; pass `action` for any real button(s)/CTA. */
 export interface EmptyStateProps {
     /** Heading text. Defaults to "No data found". */
     title?: string;
+    /** Heading element for the title; defaults to "h3" — pick the level that fits the page outline. */
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "h6" | "p";
     /** Supporting line under the title. */
     description?: string;
     /** A lucide-react (or any) icon component rendered inside the badge. */
     icon?: ElementType;
     /** Illustration image URL. When provided it replaces the icon badge. */
     image?: string;
+    /** Alt text for `image`; defaults to "" (decorative) because the title already says it. */
+    imageAlt?: string;
     /** Controls spacing, icon and font sizes. */
     size?: EmptyStateSize;
     /** Accent color for the icon badge. */
@@ -19,7 +26,7 @@ export interface EmptyStateProps {
     variant?: "default" | "subtle" | "dashed";
     /** Action node(s) — usually a Button or a pair of buttons. */
     action?: ReactNode;
-    /** Float the icon gently to draw attention. */
+    /** Float the icon gently to draw attention; off under reduced motion. */
     animate?: boolean;
     /** Minimum height of the container. */
     minH?: BoxProps["minH"];

package/dist/Components/FeedbackForm/FeedbackForm.d.ts

@@ -5,12 +5,15 @@ export type FeedbackPayload = {
     lastName: string;
     email: string;
 };
+/** Provide onSubmit or submitUrl — with neither, the form still validates and shows a success toast, but nothing is ever sent. */
 export type FeedbackFormProps = {
     onSubmit?: (payload: FeedbackPayload) => Promise<void> | void;
     submitUrl?: string;
     isSubmittingText?: string;
     submitText?: string;
+    /** Only seeds state via useState's initializer on mount — changing this prop later does not resync the rendered fields. */
     defaultValues?: Partial<FeedbackPayload>;
     isDisabled?: boolean;
 };
+/** Renders its own success/error toast via this library's Toaster — needs a mounted ToasterProvider. */
 export default function FeedbackForm(props: FeedbackFormProps): import("react/jsx-runtime").JSX.Element;