pixelize-design-library 2.4.2-beta.3 → 2.4.2-beta.31

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

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

package/dist/Components/Button/Button.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
-function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }) {
-    return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
-}
+const Button = (0, react_1.forwardRef)(function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, w, sx, colorScheme, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }, ref) {
+    const isIconOnly = !children && !label && !!(leftIcon || rightIcon);
+    return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, iconSpacing: isIconOnly ? 0 : undefined, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+});
 exports.default = (0, react_1.memo)(Button);

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

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const solidFillRung_1 = require("../../Theme/tokens/builders/solidFillRung");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 /**
  * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
  * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
@@ -19,24 +22,27 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
     return "opacity" in scale ? scale.opacity[step] : scale[50];
 };
-/**
- * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
- * white label stays legible.
- *
- * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
- * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
- * [400]/[300] in dark. Hardcoding [600] would hand the label a LIGHTER fill in dark and drop it to
- * ~3.2 contrast.
- */
-const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const buttonSolidRung = (theme, colorScheme) => (0, solidFillRung_1.solidRung)(theme.colors[colorScheme], theme.colors.white);
 const darkerFill = (theme, colorScheme, step) => {
-    const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
-    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+    const scale = theme.colors[colorScheme];
+    const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
+    return scale[(0, solidFillRung_1.darkerFillRung)(scale, theme.colors.white, isDark, step)];
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => (0, accentText_1.onFilled)(fill, theme.colors.white, theme.colors.black);
+/**
+ * The two-tone `:focus-visible` ring, from the palette's derived `focusRing` pair.
+ *
+ * Every variant spreads this. Before it, none of them defined `_focusVisible` at all, so every
+ * button in every consuming app fell through to Chakra's stock `shadows.outline` — one fixed blue
+ * that measured 1.83:1 on the canvas and 1.38:1 on a primary fill, failing WCAG 1.4.11 (3:1) on
+ * all nine brands. `focusRing.test.ts` is the gate that keeps this true.
+ */
+const focusRing = (theme) => (0, focusRing_styles_1.focusVisibleStyles)(theme.colors);
 exports.Button = {
-    baseStyle: () => ({
+    // The ring is repeated on every variant below AND here, so a variant name this file does not
+    // define (a consumer's own, or an `IconButton` falling through) still gets an indicator.
+    baseStyle: ({ theme }) => ({
         borderRadius: "lg",
         fontWeight: 500,
         fontSize: "1rem",
@@ -45,10 +51,11 @@ exports.Button = {
             opacity: 0.6,
             cursor: "not-allowed",
         },
+        ...focusRing(theme),
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][500];
+            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);
@@ -77,25 +84,26 @@ exports.Button = {
                         color: hoverLabel,
                     },
                 },
+                ...focusRing(theme),
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
-            const hoverFill = theme.colors[colorScheme][500];
+            // Same rung as `solid`'s fill, not raw [500] — keeps hover bg AA-safe for white text.
+            const hoverFill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
             const activeFill = darkerFill(theme, colorScheme, 0);
+            const ink = onCanvasText(theme, colorScheme);
             return {
                 border: "0.1rem solid",
-                borderColor: theme.colors[colorScheme][500],
-                color: onCanvasText(theme, colorScheme),
+                borderColor: ink,
+                color: ink,
                 bg: "transparent",
                 _hover: {
                     bg: hoverFill,
                     borderColor: activeFill,
-                    // Was a hardcoded `theme.colors.white` — fails AA for any colorScheme whose [500]
-                    // doesn't clear white contrast (e.g. emerald/rosewood primary in dark, 3.38/3.46).
                     color: labelFor(theme, hoverFill),
                     _disabled: {
                         //  bg: theme.colors[colorScheme][500],
-                        color: onCanvasText(theme, colorScheme),
+                        color: ink,
                     },
                 },
                 _active: {
@@ -104,8 +112,9 @@ exports.Button = {
                 },
                 _loading: {
                     // bg: theme.colors[colorScheme][500],
-                    color: onCanvasText(theme, colorScheme),
+                    color: ink,
                 },
+                ...focusRing(theme),
             };
         },
         ghost: ({ theme, colorScheme = "primary" }) => ({
@@ -118,6 +127,7 @@ exports.Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
             color: onCanvasText(theme, colorScheme),
@@ -130,22 +140,25 @@ exports.Button = {
             _active: {
                 color: onCanvasText(theme, colorScheme),
             },
+            ...focusRing(theme),
         }),
-        unstyled: () => ({
+        // `unstyled` drops the fill, not the affordance: a focus indicator is not styling.
+        unstyled: ({ theme }) => ({
             bg: "transparent",
             color: "inherit",
             _hover: {
                 bg: "transparent",
             },
+            ...focusRing(theme),
         }),
         // Theme-based two-tone gradient: each theme defines its own `gradient` {from,to} pair.
         // Ignores colorScheme; hover/active shift brightness so it works for any pair.
         gradient: ({ theme }) => {
-            const g = theme.colors.gradient;
-            const bg = `linear-gradient(135deg, ${g.from} 0%, ${g.to} 100%)`;
+            const g = (0, gradientInk_1.resolveGradient)(theme.colors.gradient, theme.colors.white, theme.colors.black);
+            const bg = (0, gradientInk_1.gradientCss)(g);
             return {
                 bgImage: bg,
-                color: (0, accentText_1.onGradient)(g.from, g.to, theme.colors.white, theme.colors.black),
+                color: g.ink,
                 border: "none",
                 _hover: {
                     bgImage: bg,
@@ -163,6 +176,7 @@ exports.Button = {
                     filter: "brightness(0.92)",
                     _hover: { bgImage: bg, filter: "brightness(0.92)" },
                 },
+                ...focusRing(theme),
             };
         },
     },

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

@@ -1,5 +1,9 @@
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
+type LayoutProps = Pick<ChakraButtonProps, "as" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "p" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "w" | "minW" | "maxW" | "h" | "minH" | "maxH" | "boxSize" | "flex" | "flexShrink" | "flexGrow" | "alignSelf" | "justifyContent" | "cursor" | "fontWeight" | "fontSize" | "textAlign" | "whiteSpace" | "_hover" | "_active" | "_focus" | "_focusVisible" | "_disabled" | "isActive" | "onKeyDown" | "onFocus" | "onBlur" | "onPointerDown" | "tabIndex" | "form" | "name" | "value" | "autoFocus" | "role">;
+type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs" | "xl";
@@ -10,3 +14,4 @@ export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "righ
     children?: React.ReactNode;
     opacity?: number;
 };
+export {};

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const color_1 = require("../../Theme/tokens/builders/color");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
@@ -49,9 +49,9 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     // keep the segments transparent (so it doesn't restart per button/icon), with a
     // translucent-white hover overlay for per-segment feedback.
     const isGradient = variant === "gradient";
-    const gradientStops = theme.colors.gradient;
-    const gradientBg = `linear-gradient(135deg, ${gradientStops.from} 0%, ${gradientStops.to} 100%)`;
-    const gradientInk = (0, accentText_1.onGradient)(gradientStops.from, gradientStops.to, theme.colors.white, theme.colors.black);
+    const gradientStops = (0, gradientInk_1.resolveGradient)(theme.colors.gradient, theme.colors.white, theme.colors.black);
+    const gradientBg = (0, gradientInk_1.gradientCss)(gradientStops);
+    const gradientInk = gradientStops.ink;
     const whiteRgb = (0, color_1.hexToRgb)(theme.colors.white);
     const whiteOverlay = (alpha) => `rgba(${whiteRgb.r}, ${whiteRgb.g}, ${whiteRgb.b}, ${alpha})`;
     const gradientItemSx = isGradient
@@ -72,7 +72,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                             // this theme-swap app never triggers) — our `bg` prop above only recolors the list
                             // itself, not the inherited var, so items fell back to white until hover/focus (which
                             // our own sx already overrides). Setting the var here fixes the rest state too.
-                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: theme.colors.boxborder[500], borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",
                                     gap: "0.5rem",
@@ -90,7 +90,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                             mx: 0,
                                             borderRadius: "none",
                                             borderBottom: "1px solid",
-                                            borderColor: theme.colors.boxborder[300],
+                                            borderColor: theme.colors.boxborder[200],
                                         }
                                         : {}),
                                     _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },

package/dist/Components/Card/Card.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "./CardProps";
-export default function Card({ key, maxW, align, variant, direction, justify, children, size, color, overflow, sx, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default function Card({ maxW, align, variant, direction, justify, children, size, color, overflow, sx, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Card/Card.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Card;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-function Card({ key, maxW, align, variant, direction, justify, children, size, color, overflow, sx, }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, p: 4, sx: sx, children: children }, key));
+function Card({ maxW, align, variant, direction, justify, children, size, color, overflow, sx, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, p: 4, sx: sx, children: children }));
 }

package/dist/Components/Card/CardProps.d.ts

@@ -6,7 +6,6 @@ export type CardProps = Pick<ChakraCardProps, "direction" | "maxW" | "align" | "
     variant?: "elevated" | "outline" | "filled" | "unstyled";
     size?: "sm" | "md" | "lg";
     color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-    key?: string;
     dividercolor?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
     dividersize?: string;
     dividervariant?: "solid" | "dashed";

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -20,6 +20,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
             buttonColor50: theme.colors.green[50],
+            colorScheme: "green",
         });
     }
     if (isNextUpgrade) {
@@ -28,6 +29,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
         });
     }
     if (popular) {
@@ -36,6 +38,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
         });
     }
     return withOnButtonColor({
@@ -43,17 +46,14 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
         badgeColor: "",
         buttonColor: theme.colors.primary[500],
         buttonColor50: theme.colors.primary[50],
+        colorScheme: "primary",
     });
 };
 const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
     const variantStyles = plan.buttonVariant === "outline"
-        ? {
-            borderColor: buttonColor,
-            color: buttonColor,
-            _hover: { bg: buttonColor50 },
-        }
+        ? {}
         : {
             bg: buttonColor,
             color: onButtonColor,
@@ -65,6 +65,6 @@ const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCyc
             // 🔹 Actual Card Content
             (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
                                         ? plan.yearlyPrice
-                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
+                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, colorScheme: colorScheme, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };
 exports.default = PaymentCard;

package/dist/Components/Checkbox/Checkbox.js

@@ -27,7 +27,7 @@ function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelC
             ...labelSx,
         }
         : { ...labelSx };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
                     ...sx,
                     ".chakra-checkbox__control": { w: controlSize, h: controlSize },
                 }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -2,22 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 exports.Checkbox = {
     baseStyle: ({ theme, colorScheme = "primary" }) => {
         var _a;
         const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
-        // A browser probe found the checked checkbox's hover repeating its own resting `[600]` fill.
-        // Chakra's stock control also carries a checked-hover at `_checked._hover` (this override
-        // nests the other way, `_hover._checked`) — two different key paths landing on the same
-        // selector, so whichever one the cascade picks must still differ from resting. Setting both
-        // paths to the same lifted value removes that ambiguity outright.
+        // Both `_checked._hover` and `_hover._checked` paths get the same lifted value.
         const hoverChecked = (0, outlineRung_1.resolveHoverTint)(palette[600], palette[600]);
+        const checkedIcon = (0, accentText_1.onFilled)(palette[600], theme.colors.white, theme.colors.black);
+        const hoverCheckedIcon = (0, accentText_1.onFilled)(hoverChecked, theme.colors.white, theme.colors.black);
+        const focusRing = (0, outlineRung_1.liftToContrast)(palette[300], theme.colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT);
         return {
             control: {
                 width: "1.25rem",
                 height: "1.25rem",
                 borderWidth: "1.6px",
                 borderRadius: "base",
+                // Without a resting colour Chakra falls back to its own gray.500.
+                borderColor: theme.colors.boxborder[500],
                 transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
                 _disabled: {
                     bg: theme.colors.background[50],
@@ -52,7 +54,7 @@ exports.Checkbox = {
                     },
                 },
                 _focus: {
-                    boxShadow: `0 0 0 2px ${palette[300]}`,
+                    boxShadow: `0 0 0 2px ${focusRing}`,
                     borderColor: palette[500],
                 },
                 _active: {
@@ -61,7 +63,10 @@ exports.Checkbox = {
                 },
             },
             icon: {
-                color: theme.colors.background[50],
+                color: checkedIcon,
+                _hover: {
+                    color: hoverCheckedIcon,
+                },
             },
         };
     },

package/dist/Components/Common/fieldStyles.js

@@ -14,7 +14,7 @@ exports.FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
 const getFieldStateStyles = (theme, { error = false, focused = false } = {}) => {
     // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
     // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const idleBorder = theme.colors.boxborder[800];
+    const idleBorder = theme.colors.boxborder[500];
     const primary = theme.colors.primary[500];
     const errorColor = theme.colors.semanticText.error;
     const ringPrimary = theme.colors.boxShadow.primary;

package/dist/Components/CopyButton/CopyButton.js

@@ -9,6 +9,7 @@ const react_2 = 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 outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -34,12 +35,15 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     const accent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semanticText.success;
     if (variant === "menu-item") {
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: success }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: accent }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
+        // Ink also sits on the row's own hover fill (gray[100]), not just the canvas — resolve against it.
+        const hoverAccent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.gray[100]);
+        const hoverSuccess = (0, outlineRung_1.liftToContrast)(theme.colors.semantic.success[500], theme.colors.gray[100], accentText_1.AA_NORMAL_TEXT);
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }));
     }
     if (variant === "button") {
         return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
             // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
-            borderColor: copied ? success : theme.colors.boxborder[800], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }));
+            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }));
     }
     return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }) }) }));
 };

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -19,6 +19,6 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
                                 // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
                                 // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
                                 // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
-                                borderColor: colors.boxborder[800], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+                                borderColor: colors.boxborder[500], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 exports.default = EditModuleModal;

package/dist/Components/DatePicker/CalendarPanel.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { type DayStates, type RenderDayContent } from "./dayStates";
 export type CalendarPanelProps = {
     currentMonth: Date;
     setCurrentMonth: (updater: (prev: Date) => Date) => void;
@@ -19,6 +20,10 @@ export type CalendarPanelProps = {
     hoveredDate?: Date | null;
     onDayHover?: (d: Date | null) => void;
     renderWeekdays?: React.ReactNode;
+    /** Marks individual days (weekly off, holiday, …). See `dayStates.ts`. Omit for the plain grid. */
+    dayStates?: DayStates;
+    /** Custom content inside a day cell, replacing that day's built-in marker dot. */
+    renderDayContent?: RenderDayContent;
 };
 export declare const CalendarPanel: React.FC<CalendarPanelProps>;
 export default CalendarPanel;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -11,7 +11,8 @@ const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, }) => {
+const dayStates_1 = require("./dayStates");
+const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rangeBg = theme.colors.primary.opacity[16];
     const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
@@ -26,7 +27,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
     const hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
     const selectStyles = {
         border: "1px solid",
-        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[300]
+        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[200]
         // is decorative and measured 1.85:1 on the dark canvas — the select read as borderless.
         borderColor: theme.colors.boxborder[500],
         borderRadius: "md",
@@ -51,6 +52,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
         },
     };
     const renderDays = () => {
+        var _a;
         const monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
         const monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
         const startDate = (0, date_fns_1.startOfWeek)(monthStart);
@@ -69,12 +71,17 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                 const isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
                 const isTentativeEnd = isEnd && isTentative;
                 const circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
+                // Marking is not disabling: only the `disabled` state key blocks selection, and only
+                // because the caller asked for it by name.
+                const states = (_a = dayStates === null || dayStates === void 0 ? void 0 : dayStates(thisDay)) !== null && _a !== void 0 ? _a : [];
+                const stateVisual = states.length ? (0, dayStates_1.resolveDayStateVisual)(states, theme.colors) : null;
                 const disabled = !isInCurrentMonth ||
                     !!(minDate && isBefore(thisDay, minDate)) ||
                     !!(maxDate && isAfter(thisDay, maxDate)) ||
                     !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
                     !!(disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
-                    !!(disableToday && isToday);
+                    !!(disableToday && isToday) ||
+                    !!(stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.blocksSelection);
                 // Connected range band painted on the cell background; start/end use a
                 // half gradient so the band meets the solid day circle cleanly.
                 let cellBg;
@@ -88,6 +95,9 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                     else if (isEnd)
                         cellBg = `linear-gradient(to right, ${rangeBg} 50%, transparent 50%)`;
                 }
+                // Selection feedback outranks a state tint — the band is what tells the user what they picked.
+                if (!cellBg && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.cellBg))
+                    cellBg = stateVisual.cellBg;
                 // Solid fill (selected/range-endpoint) needs the ink checked against that
                 // specific fill — `primary[500]` doesn't reliably clear AA for white text on
                 // every brand/mode (same gap the solid Button variant already accounts for).
@@ -108,11 +118,20 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                         : isToday
                             ? `1px solid ${theme.colors.primary[300]}`
                             : "1px solid transparent";
-                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", disabled: disabled, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                // A filled circle owns its own ink (checked against that fill by `onFilled`), so a state
+                // never repaints a selected day — it would undo that contrast guarantee.
+                const dayColor = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.color) ? stateVisual.color : circleColor;
+                const dayBorder = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.border) ? stateVisual.border : circleBorder;
+                const customContent = renderDayContent ? renderDayContent(thisDay, states) : null;
+                const markerColor = customContent == null && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.markerColor) ? stateVisual.markerColor : null;
+                const hasDayOverlay = customContent != null || markerColor != null;
+                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? (0, dayStates_1.dayStateClassName)(states) : undefined, "aria-label": dayStates ? (0, dayStates_1.dayAccessibleName)((0, date_fns_1.format)(thisDay, "d MMMM yyyy"), states) : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }
-                                : { bg: rangeBg }, children: (0, date_fns_1.format)(thisDay, "d") }) }, thisDay.toString()));
+                                : { bg: rangeBg }, children: [(0, date_fns_1.format)(thisDay, "d"), hasDayOverlay && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "0.0625rem", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
+                                // The overlay is decoration: clicks belong to the day button under it.
+                                pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
                 day = (0, date_fns_1.addDays)(day, 1);
             }
             rows.push((0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -1,3 +1,4 @@
+import type { DayStates, RenderDayContent } from "./dayStates";
 export type PickerType = "date" | "time" | "datetime";
 export type BaseDatePickerProps = {
     id?: string;
@@ -40,6 +41,26 @@ export type RangeDatePickerProps = BaseDatePickerProps & {
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: RangeDate | null;
     onChange: (range: RangeDate | null) => void;
+    /**
+     * Marks individual days with zero or more state keys — `["weekly-off"]`, `["Onam", "holiday"]`,
+     * `["excluded"]`. The keys in `DAY_STATE_KEYS` (`weekly-off`, `holiday`, `optional-holiday`,
+     * `excluded`, `disabled`) carry built-in, token-driven styling; any other key is announced to a
+     * screen reader but left unstyled, which is how a day gets named without a second prop.
+     *
+     * Marking is not disabling: a marked day stays selectable unless the caller also returns
+     * `"disabled"`, or blocks the day with `minDate`/`maxDate`/`disablePastDates`/`disableFutureDates`.
+     *
+     * Supplying this also spells each day's accessible name out in full — "16 September 2025, Onam,
+     * holiday" instead of "16". Called once per rendered day (42 per month), so keep it cheap and pure.
+     */
+    dayStates?: DayStates;
+    /**
+     * Custom content rendered inside the day cell, centred under the day number — a dot, a short
+     * label, a tooltip trigger. Receives that day's resolved state keys. Returning a node replaces
+     * the built-in marker dot for that day; the number, the accessible name and hit target are
+     * unchanged (the overlay does not take pointer events).
+     */
+    renderDayContent?: RenderDayContent;
 };
 export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
 export type TimePickerProps = {