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

package/dist/Components/ButtonGroupIcon/ButtonGroupIconProps.js

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

package/dist/Components/Buttons/Buttons.d.ts

@@ -1,3 +1,3 @@
 import { ButtonsProps } from './ButtonsProps';
-declare const Buttons: ({ onClick, label, className, disabled }: ButtonsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Buttons: ({ onClick, label, isDisabled, disabled }: ButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export default Buttons;

package/dist/Components/Buttons/Buttons.js

@@ -1,7 +1,9 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Buttons = ({ onClick, label, className, disabled }) => {
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: `bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, disabled: disabled, children: label }));
-};
+const Button_1 = __importDefault(require("../Button/Button"));
+const Buttons = ({ onClick, label, isDisabled, disabled }) => ((0, jsx_runtime_1.jsx)(Button_1.default, { label: label, onClick: onClick, isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled, colorScheme: "primary" }));
 exports.default = Buttons;

package/dist/Components/Buttons/ButtonsProps.d.ts

@@ -1,6 +1,12 @@
+/** Thin, token-themed wrapper over Button; not exported from the package root and not a group wrapper despite the plural name — use Button directly instead. */
 export type ButtonsProps = {
     label: string;
+    /** Typed with no event param, so preventDefault/stopPropagation aren't reachable through this prop. */
     onClick: () => void;
+    /** @deprecated No longer applied — this button is theme-token driven, not Tailwind classes. */
     className?: string;
+    /** Blocks the click and dims the button; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
 };

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

@@ -1,2 +1,18 @@
-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;
+declare const Card: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").CardProps, "color" | "colorScheme" | "direction" | "size" | "justify" | "children" | "variant" | "align"> & {
+    dividercolor?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed";
+} & {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    variant?: "elevated" | "outline" | "filled" | "unstyled";
+    size?: "sm" | "md" | "lg";
+    colorScheme?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    direction?: import("@chakra-ui/react").ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    align?: import("@chakra-ui/react").CardBodyProps["alignItems"];
+    justify?: import("@chakra-ui/react").CardBodyProps["justifyContent"];
+    bodyProps?: import("@chakra-ui/react").CardBodyProps;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Card;

package/dist/Components/Card/Card.js

@@ -1,8 +1,13 @@
 "use strict";
 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));
-}
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Card = (0, react_1.forwardRef)(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, ...rest }, ref) {
+    const cardProps = { ...rest };
+    delete cardProps.dividercolor;
+    delete cardProps.dividersize;
+    delete cardProps.dividervariant;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, children: [header && (0, jsx_runtime_1.jsx)(react_2.CardHeader, { children: header }), (0, jsx_runtime_1.jsx)(react_2.CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { children: footer })] }));
+});
+exports.default = Card;

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

@@ -1,13 +1,33 @@
-import { CardProps as ChakraCardProps } from "@chakra-ui/react";
-export type CardProps = Pick<ChakraCardProps, "direction" | "maxW" | "align" | "justify" | "overflow" | "sx"> & {
+import { CardProps as ChakraCardProps, CardBodyProps, ResponsiveValue } from "@chakra-ui/react";
+type CardColorScheme = "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+/** @deprecated Never rendered — Card draws no divider; parts are separated by theme padding. */
+type DeadDividerProps = {
+    dividercolor?: CardColorScheme;
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed";
+};
+/** Themed outline surface with optional header/footer slots; children and direction/align/justify apply to the body. */
+export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" | "color" | "colorScheme" | "direction" | "align" | "justify"> & DeadDividerProps & {
+    /** Rendered in CardHeader (semibold header ink) only when truthy. */
     header?: React.ReactNode;
+    /** Rendered in CardFooter only when truthy. */
     footer?: React.ReactNode;
     children: React.ReactNode;
+    /** Defaults to "outline", the only token-themed one; others fall back to Chakra's stock look. */
     variant?: "elevated" | "outline" | "filled" | "unstyled";
+    /** Padding scale for header/body/footer; defaults to "md". */
     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";
+    /** @deprecated No visual effect — neither Chakra's nor this theme's Card styles read a colour scheme. */
+    colorScheme?: CardColorScheme;
+    /** @deprecated Alias of the no-op `colorScheme`, and not a CSS color. */
+    color?: CardColorScheme;
+    /** Body flex direction; defaults to "column". */
+    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    /** Body alignItems; `bodyProps` wins if it sets the same thing. */
+    align?: CardBodyProps["alignItems"];
+    /** Body justifyContent; `bodyProps` wins if it sets the same thing. */
+    justify?: CardBodyProps["justifyContent"];
+    /** Props for the body wrapper, e.g. `p={0}` for edge-to-edge media. */
+    bodyProps?: CardBodyProps;
 };
+export {};

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

@@ -7,64 +7,77 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const filledSurface_1 = require("../../../Theme/tokens/builders/filledSurface");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../../Theme/chakra/motion");
 const Button_1 = __importDefault(require("../../Button/Button"));
 const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
-    const withOnButtonColor = (styles) => ({
-        ...styles,
-        onButtonColor: (0, accentText_1.onFilled)(styles.buttonColor, theme.colors.white, theme.colors.black),
-    });
+    const withOnButtonColor = (styles) => {
+        const scale = theme.colors[styles.buttonScale];
+        const solid = (0, filledSurface_1.resolveFilledSurface)(scale, theme.colors);
+        return {
+            ...styles,
+            buttonColor: solid.fill,
+            onButtonColor: solid.color,
+            iconInk: (0, accentText_1.accentTextOnCanvas)(scale, styles.buttonColor50),
+        };
+    };
     if (isActive) {
         return withOnButtonColor({
             badgeText: "Active Plan",
-            badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
+            buttonScale: "green",
             buttonColor50: theme.colors.green[50],
+            colorScheme: "green",
         });
     }
     if (isNextUpgrade) {
         return withOnButtonColor({
             badgeText: "Upgrade Your Plan",
-            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
         });
     }
     if (popular) {
         return withOnButtonColor({
             badgeText: "Most Popular",
-            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
         });
     }
     return withOnButtonColor({
         badgeText: "",
-        badgeColor: "",
+        badgeColor: `0.063rem solid ${theme.colors.boxborder[200]}`,
         buttonColor: theme.colors.primary[500],
+        buttonScale: "primary",
         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, iconInk, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
     const variantStyles = plan.buttonVariant === "outline"
-        ? {
-            borderColor: buttonColor,
-            color: buttonColor,
-            _hover: { bg: buttonColor50 },
-        }
+        ? {}
         : {
             bg: buttonColor,
             color: onButtonColor,
             _hover: { bg: buttonColor },
         };
-    return ((0, jsx_runtime_1.jsx)(react_1.GridItem, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" }, children: isLoading ? (
+    return ((0, jsx_runtime_1.jsx)(react_1.GridItem, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "xl", p: 8, position: "relative", transition: (0, motion_1.transitionFor)(["transform", "box-shadow"], "base"), transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "lg" }, sx: (0, motion_2.reducedMotionSx)(), children: isLoading ? (
             // 🔹 Skeleton Loader Layout
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
             // 🔹 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"
+            (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: iconInk, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], 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.header[900], 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.textMuted, children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.semanticText.success, mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.textMuted, 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.semanticText.success, mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };
 exports.default = PaymentCard;

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

@@ -1,14 +1,19 @@
+/** Subscription/pricing-tier card — takes a `Plan` (billing cycle, features), not a physical product like ProductCard's `options`. */
 export type PaymentCardProps = {
     plan: Plan;
+    /** true hides the CTA button unless `isRenewal` is also true, no matter what `plan.buttonText` says. */
     isActive?: boolean;
     isNextUpgrade?: boolean;
     billingCycle: "monthly" | "yearly";
     onSelect?: (planId: number) => void;
+    /** `type` is always "button" in practice — PaymentCard never wires hover on the outer card, only the CTA button. */
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
+    /** The plan_id whose button should spin, not a boolean — matched via `===` against each plan's plan_id. */
     buttonLoading?: number;
     isLoading?: boolean;
     isRenewal?: boolean;
 };
+/** Plan data rendered by PaymentCard — `billing`/`tax` are pre-formatted display strings shown under the price, not derived from monthlyPrice/yearlyPrice. */
 export type Plan = {
     plan_id: number;
     name: string;
@@ -20,6 +25,7 @@ export type Plan = {
     features: string[];
     icon: React.ReactNode;
     buttonText: string;
+    /** "link" still gets the same filled bg/color override as "solid" — only "outline" is excluded from it. */
     buttonVariant: "solid" | "outline" | "link";
     popular?: boolean;
     buttonLoadingText?: string;

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,2 +1,3 @@
 import { CheckboxProps } from "./CheckboxProps";
-export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label. `error` marks it invalid and links the message via aria-describedby. */
+export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Checkbox/Checkbox.js

@@ -7,14 +7,17 @@ exports.default = CheckBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }) {
+/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label. `error` marks it invalid and links the message via aria-describedby. */
+function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }) {
+    void variant;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const controlSize = size === "sm" ? "1rem"
-        : size === "md" ? "1.25rem"
-            : size === "lg" ? "1.5rem"
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const controlSize = size === "sm" ? "0.875rem"
+        : size === "md" ? "1rem"
+            : size === "lg" ? "1.25rem"
                 : size; // pass-through if already a CSS value
     const clampStyles = labelClampLines
         ? {
@@ -27,8 +30,8 @@ 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, { id: ids.inputId, "aria-describedby": ids.describedBy, ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid || error, 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 })] }));
+                }, 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.875rem", 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.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

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

@@ -1,67 +1,77 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const fieldStyles_1 = require("../Common/fieldStyles");
+// One fill rule for every colour scheme, via resolveFilledSurface — was a flat [600].
 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.
-        const hoverChecked = (0, outlineRung_1.resolveHoverTint)(palette[600], palette[600]);
+        const filled = (0, filledSurface_1.resolveFilledSurface)(palette, theme.colors);
+        // filledSurface's own hoverFill can collapse on a near-monochrome scale (zinc); step from
+        // the resolved fill with resolveHoverTint instead, which guarantees a perceptible move.
+        const hoverFill = (0, outlineRung_1.resolveHoverTint)(filled.fill, filled.fill);
+        const hoverColor = (0, accentText_1.onFilled)(hoverFill, theme.colors.white, theme.colors.black);
+        const activeFill = (0, outlineRung_1.resolveHoverTint)(hoverFill, hoverFill);
         return {
             control: {
-                width: "1.25rem",
-                height: "1.25rem",
-                borderWidth: "1.6px",
+                borderWidth: "1px",
                 borderRadius: "base",
+                borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors),
                 transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
-                _disabled: {
-                    bg: theme.colors.background[50],
-                    borderColor: theme.colors.boxborder[500],
-                    cursor: "not-allowed",
+                _invalid: {
+                    borderColor: theme.colors.semanticText.error,
                 },
                 _indeterminate: {
-                    bg: theme.colors.background[50],
-                    borderColor: palette[500],
-                    svg: {
-                        color: palette[500],
-                    },
+                    bg: filled.fill,
+                    borderColor: filled.fill,
+                    svg: { color: filled.color },
                 },
                 _checked: {
-                    bg: palette[600],
-                    borderColor: palette[600],
+                    bg: filled.fill,
+                    borderColor: filled.fill,
                     _hover: {
-                        bg: hoverChecked,
-                        borderColor: hoverChecked,
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                 },
                 _hover: {
                     bg: theme.colors.background[100],
-                    borderColor: palette[400],
+                    borderColor: filled.fill,
                     _checked: {
-                        bg: hoverChecked,
-                        borderColor: hoverChecked,
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                     _indeterminate: {
-                        bg: "none",
-                        borderColor: palette[600],
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                 },
-                _focus: {
-                    boxShadow: `0 0 0 2px ${palette[300]}`,
-                    borderColor: palette[500],
-                },
+                _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
                 _active: {
-                    bg: palette[600],
-                    borderColor: palette[600],
+                    bg: activeFill,
+                    borderColor: activeFill,
+                },
+                // Last so it wins over _checked/_indeterminate at equal specificity.
+                _disabled: {
+                    bg: theme.colors.background[100],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                    opacity: 1,
                 },
             },
             icon: {
-                color: theme.colors.background[50],
+                color: filled.color,
+                _hover: {
+                    color: hoverColor,
+                },
+                _disabled: {
+                    color: theme.colors.textMuted,
+                },
             },
         };
     },

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -1,16 +1,29 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
+/** Curated Pick of Chakra's native CheckboxProps (not a full re-export) plus this library's label/tooltip/error additions. */
 export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick" | "aria-label" | "aria-labelledby" | "aria-describedby" | "id"> & {
+    /** Optional; without it, pass `aria-label`. */
     label?: string;
+    /** Defaults to "0.875rem" (14px). */
     labelFontSize?: string;
+    /** Wraps the label in a tooltip showing `labelTooltip`. */
     showLabelTooltip?: boolean;
+    /** Tooltip text; defaults to `label`. Ignored unless `showLabelTooltip`. */
     labelTooltip?: string;
+    /** Clamps the label to this many lines with an ellipsis. */
     labelClampLines?: number;
+    /** Passed through to the Chakra checkbox root. */
     width?: string | number;
+    /** @deprecated Ignored — Checkbox.styles.ts defines no `variants` key; a checkbox has no button-like look to switch. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    /** Maps to Chakra's colorScheme (icon/fill tint), not a CSS color — text color is fixed via theme tokens. */
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    /** Control box sm 14px · md 16px · lg 20px; defaults to "md". */
     size?: "sm" | "md" | "lg";
+    /** Sets `isInvalid` (error border + aria-invalid) and shows `errorMessage` in place of `helperText`, linked via aria-describedby. */
     error?: boolean;
     errorMessage?: string;
+    /** Hidden while `error` is true. */
     helperText?: string;
+    /** Extra styles for the label span, merged after the clamp styles. */
     labelSx?: React.CSSProperties;
 };

package/dist/Components/Common/ErrorComponent.d.ts

@@ -1,4 +1,6 @@
+/** Inline error row for Input; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
 declare const ErrorComponent: ({ error, errorClassName, }: {
+    /** Required and rendered as-is — callers gate with `error && <ErrorComponent />` themselves; an empty string still draws the icon. */
     error: string;
     errorClassName?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Common/ErrorComponent.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+/** Inline error row for Input; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
 const ErrorComponent = ({ error, errorClassName, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const errorFill = colors.semanticText.error;
-    // errorFill is ink, not a fill tuned to carry a mark — pick the mark's ink structurally.
-    const markInk = (0, accentText_1.onFilled)(errorFill, colors.white, colors.black);
-    return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), (0, jsx_runtime_1.jsx)("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), (0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: error })] }));
+    const errorText = colors.semanticText.error;
+    const errorSolid = (0, filledSurface_1.resolveFilledSurface)(colors.semantic.error, colors);
+    const errorFill = errorSolid.fill;
+    const markInk = errorSolid.color;
+    return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorText, className: errorClassName, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), (0, jsx_runtime_1.jsx)("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), (0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: error })] }));
 };
 exports.default = ErrorComponent;

package/dist/Components/Common/ErrorMessage.d.ts

@@ -1,5 +1,5 @@
 declare const ErrorMessage: ({ errorMessage, id }: {
-    errorMessage?: string;
+    errorMessage: string;
     id?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ErrorMessage;

package/dist/Components/Common/ErrorMessage.js

@@ -4,10 +4,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-// `id` lets a field point `aria-describedby` here so the message is part of the control's
-// description on every focus. `role="alert"` alone announces once, when it first renders.
+const fieldMessageStyles_1 = require("./fieldMessageStyles");
+// `id` lets a field point `aria-describedby` here; `role="alert"` announces once.
 const ErrorMessage = ({ errorMessage, id }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, role: "alert", align: "flex-start", gap: "0.25rem", ...(0, fieldMessageStyles_1.fieldMessageStyles)(colors), color: colors.semanticText.error, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", h: "1.125rem", align: "center", flexShrink: 0, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 12 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: errorMessage })] }));
 };
 exports.default = ErrorMessage;

package/dist/Components/Common/FieldMessage.d.ts

@@ -0,0 +1,9 @@
+import { type FieldMessageState } from "./fieldMessageStyles";
+export type FieldMessageProps = FieldMessageState & {
+    /** From `useFieldIds` — must match the control's `aria-describedby`. */
+    helperId?: string;
+    errorId?: string;
+};
+/** The single message row under a field: error when `error`, else helper, else nothing. */
+declare const FieldMessage: ({ error, errorMessage, helperText, helperId, errorId }: FieldMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default FieldMessage;

package/dist/Components/Common/FieldMessage.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+const HelperText_1 = __importDefault(require("./HelperText"));
+const fieldMessageStyles_1 = require("./fieldMessageStyles");
+/** The single message row under a field: error when `error`, else helper, else nothing. */
+const FieldMessage = ({ error, errorMessage, helperText, helperId, errorId }) => {
+    const { showError, showHelper } = (0, fieldMessageStyles_1.fieldMessageVisibility)({ error, errorMessage, helperText });
+    if (showError && errorMessage)
+        return (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { id: errorId, errorMessage: errorMessage });
+    if (showHelper && helperText)
+        return (0, jsx_runtime_1.jsx)(HelperText_1.default, { id: helperId, helperText: helperText });
+    return null;
+};
+exports.default = FieldMessage;

package/dist/Components/Common/FormLabel.d.ts

@@ -1,11 +1,24 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** The one field-label look (13px / 500 / `text[700]`); `Label` and `TextLabel` both read it. */
+export declare const fieldLabelStyles: (colors: PaletteProps) => {
+    color: string;
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    mb: string;
+};
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
 export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
     label: string;
+    /** Omit only when this sits inside another element's own `<label>` (e.g. Checkbox) — otherwise the visible text has no accessible association. */
     id?: string;
+    /** Both are required together — `isInformation` alone renders no icon at all; `informationMessage` alone is never read. */
     isInformation?: boolean;
     informationMessage?: string;
     isRequired?: boolean;
     fontSize?: string;
     showTooltip?: boolean;
+    /** Defaults to `label` when omitted, so a tooltip from `showTooltip` alone just repeats the visible text. */
     tooltipLabel?: string;
     clampLines?: number;
     inline?: boolean;