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

package/dist/Components/ProfileCard/ProfileCard.js

@@ -21,24 +21,39 @@ const ProfileCardFooter = ({ children, }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ProfileCardFooter = ProfileCardFooter;
-function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// Matches by type one Fragment deep, so `<>{cond && <ProfileCardFooter>...</ProfileCardFooter>}</>` isn't dropped.
+const findSlot = (children, slot) => {
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === react_1.default.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
+function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "1px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.border[200];
+    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.boxborder[200];
     const accentBorder = `2px solid ${colors.primary[500]}`;
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardHeader);
-    const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardBody);
-    const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardFooter);
+    const header = findSlot(children, exports.ProfileCardHeader);
+    const body = findSlot(children, exports.ProfileCardBody);
+    const footer = findSlot(children, exports.ProfileCardFooter);
     const StylesWithBorder = borderLeftColor
         ? { ...CardStyle, borderLeft: accentBorder }
         : borderTopColor
             ? { ...CardStyle, borderTop: accentBorder }
             : { ...CardStyle };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.CardHeader, { sx: { ...CardHeaderStyle, fontWeight: "bold" }, py: 15, children: header }), (0, jsx_runtime_1.jsx)(react_2.Divider, { style: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { maxW: maxW, align: align, variant: variant === "outlein" ? "outline" : variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.CardHeader, { sx: CardHeaderStyle, ...header.props, children: header }), (0, jsx_runtime_1.jsx)(react_2.Divider, { opacity: 1, style: {
                             borderColor: resolvedDividerColor,
-                            borderWidth: dividersize,
+                            borderWidth: 0,
+                            borderBottomWidth: dividersize,
                             borderStyle: dividervariant,
-                        } })] })), (0, jsx_runtime_1.jsx)(react_2.CardBody, { sx: CardBodyStyle, children: body }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { children: footer })] }));
+                        } })] })), (0, jsx_runtime_1.jsx)(react_2.CardBody, { sx: CardBodyStyle, ...((_a = body === null || body === void 0 ? void 0 : body.props) !== null && _a !== void 0 ? _a : {}), children: body }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { ...footer.props, children: footer })] }));
 }

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -1,8 +1,11 @@
-import { CardProps } from "@chakra-ui/react";
+import { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from "@chakra-ui/react";
+/** Mirrors Chakra Card's own variant strings — forwarded to the underlying Card unchanged. */
 export type ProfileCardVariant = "elevated" | "outline" | "filled" | "unstyled";
 /** @deprecated Misspelling kept for existing callers — use "outline". */
 export type ProfileCardVariantLegacy = "outlein";
+/** borderTopColor/borderLeftColor are booleans toggling a fixed accent border color, not custom-color props; borderLeftColor wins if both are true. */
 export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
+    /** Only ProfileCardHeader/Body/Footer children render, matched by type one fragment deep; any other sibling is dropped. */
     children: React.ReactNode;
     variant?: ProfileCardVariant | ProfileCardVariantLegacy;
     size?: "sm" | "md" | "lg";
@@ -16,3 +19,9 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
     borderTopColor?: boolean;
     borderLeftColor?: boolean;
 };
+/** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered CardHeader; omit to keep theme/CardHeaderStyle defaults. */
+export type ProfileCardHeaderSlotProps = CardHeaderProps;
+/** Chakra style props (padding, gap, sx, ...) spread onto the rendered CardBody; omit to keep theme/CardBodyStyle defaults. */
+export type ProfileCardBodySlotProps = CardBodyProps;
+/** Chakra style props (padding, gap, sx, ...) spread onto the rendered CardFooter; omit to keep theme defaults. */
+export type ProfileCardFooterSlotProps = CardFooterProps;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -1,2 +1,3 @@
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -7,6 +7,9 @@ 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 filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const color_1 = require("../../Theme/tokens/builders/color");
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = (0, react_1.useState)(photoUrl);
@@ -35,10 +38,12 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
-    // [800], not [300]: the edit IconButton's border is a control boundary — WCAG 1.4.11 needs
-    // >=3.0 against any named surface up to `muted` (lightest); [300] fails there, [800] clears
-    // all with margin.
+    // NOTE: [800] not [300] — the edit IconButton's border is a control boundary, WCAG 1.4.11 needs >=3:1.
     const border = c.boxborder[500];
+    const hoverScrim = (opacity) => {
+        const { r, g, b } = (0, color_1.hexToRgb)(c.black);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    };
     // Shared modern frame for whichever media we render (photo / pdf / fallback).
     const mediaFrame = {
         boxSize: imageWidth,
@@ -60,14 +65,14 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[500], color: (0, accentText_1.onFilled)(c.primary[500], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[(0, filledSurface_1.solidFillRung)(c.primary, c.white)], color: (0, filledSurface_1.labelOnFill)(c.primary[(0, filledSurface_1.solidFillRung)(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.primary[600],
-                                        color: (0, accentText_1.onFilled)(c.primary[600], c.white, c.black),
+                                        color: (0, filledSurface_1.labelOnFill)(c.primary[600], c.white, c.black),
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
                                         bg: c.primary[700],
-                                        color: (0, accentText_1.onFilled)(c.primary[700], c.white, c.black),
+                                        color: (0, filledSurface_1.labelOnFill)(c.primary[700], c.white, c.black),
                                     } }) })), isView && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `0.063rem solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.gray[50],
                                         color: (0, accentText_1.accentTextOnCanvas)(c.primary, c.gray[50]),

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -1,6 +1,10 @@
+/** isEditable and isView are independent — both true shows edit and view actions side by side. */
 export type ProfilePhotoViewerProps = {
+    /** Seeds state on mount only — a later change to this prop is not re-synced; remount (key={photoUrl}) to update. */
     photoUrl: string;
+    /** Receives the raw File (not a URL, despite the param name) — fires only when isEditable and a file is picked. */
     onPhotoChange: (photoUrl: File) => void;
+    /** Also sets the height (maps to Chakra's boxSize) — there's no separate height prop; the frame is square. */
     imageWidth?: string;
     imageAlt?: string;
     imageObjectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
@@ -9,12 +13,16 @@ export type ProfilePhotoViewerProps = {
     editIconSize?: "xs" | "sm" | "md" | "lg" | "xl";
     editIconPositionRight?: string;
     editIconPositionBottom?: string;
+    /** Rounds only the edit/view IconButtons — the photo/avatar shape comes from imageBorderRadius, not this. */
     isRound?: boolean;
+    /** Inline style for the outer wrapper only — the edit/view buttons use the separate `style` prop below. */
     boxStyle?: React.CSSProperties;
     isView?: boolean;
+    /** Applied to BOTH edit and view IconButtons identically — no way to style them individually. */
     style?: React.CSSProperties;
+    /** Fires from the View IconButton — that button (and this handler) only renders when isView is true. */
     handleIsView?: () => void;
     fallbackText?: string;
-    /** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
+    /** When true (the actual default), edit/view icons stay hidden until hover; false keeps them always visible. */
     revealOnHover?: boolean;
 };

package/dist/Components/ProgressBar/ProgressBar.d.ts

@@ -1,2 +1,3 @@
 import { ProgressBarProps } from "./ProgressBarProps";
-export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, ...aria }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
+export default function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProgressBar/ProgressBar.js

@@ -3,7 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ProgressBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
-    //  const theme = useCustomTheme();
-    return ((0, jsx_runtime_1.jsx)(react_1.Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+// whiteAlpha/blackAlpha keep Chakra's own fill; contrast math can't resolve alpha scales.
+const NAMED_SCALES = new Set([
+    "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
+    "primary", "secondary",
+]);
+const scaleFor = (colors, scheme) => NAMED_SCALES.has(scheme)
+    ? colors[scheme]
+    : undefined;
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
+function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }) {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const scheme = (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : color) !== null && _a !== void 0 ? _a : "primary";
+    const scale = scaleFor(colors, scheme);
+    // Chakra pins the fill to rung [500]; light hues (green/orange/blue/cyan) measure as low as
+    // 1.67:1 against the `gray[100]` track — under 1.4.11's 3:1. Lift the fill, not the track.
+    const fill = scale ? (0, outlineRung_1.liftToContrast)(scale[500], colors.gray[100]) : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_1.Progress, { ...rest, variant: variant, isIndeterminate: isIndeterminate, colorScheme: scheme, sx: fill
+            ? {
+                "& > div:first-of-type": isIndeterminate
+                    ? {
+                        backgroundImage: `linear-gradient(to right, transparent 0%, ${fill} 50%, transparent 100%) !important`,
+                    }
+                    : { backgroundColor: `${fill} !important` },
+            }
+            : undefined }));
 }

package/dist/Components/ProgressBar/ProgressBarProps.d.ts

@@ -1,6 +1,14 @@
 import { ProgressProps } from "@chakra-ui/react";
-export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "id"> & {
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary" | "secondary";
+/** Fill colour scheme; primary/secondary are brand scales, the rest global scales. */
+export type ProgressBarColorScheme = "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary" | "secondary";
+/** Thin themed wrapper over Chakra's Progress; `aria-valuetext` is the only way to describe indeterminate progress. */
+export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "id" | "borderRadius" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my"> & {
+    /** Fill colour scheme; defaults to "primary". */
+    colorScheme?: ProgressBarColorScheme;
+    /** @deprecated Use `colorScheme` — the library-wide name; still honoured when colorScheme is unset. */
+    color?: ProgressBarColorScheme;
+    /** @deprecated Forwarded to Chakra, but neither this theme nor Chakra Progress defines variants. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    /** Bar thickness. */
     size?: "lg" | "md" | "sm" | "xs";
 };

package/dist/Components/QueryState/ErrorState.d.ts

@@ -0,0 +1,4 @@
+import type { ErrorStateProps } from "./QueryStateProps";
+/** Error panel built on EmptyState's error tone, announced to screen readers. */
+declare const ErrorState: ({ title, description, icon, onRetry, retryLabel, isRetrying, action, size, minH, }: ErrorStateProps) => import("react/jsx-runtime").JSX.Element;
+export default ErrorState;

package/dist/Components/QueryState/ErrorState.js

@@ -0,0 +1,16 @@
+"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 react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Button_1 = __importDefault(require("../Button/Button"));
+/** Error panel built on EmptyState's error tone, announced to screen readers. */
+const ErrorState = ({ title = "Couldn't load this", description = "Something went wrong on our side. Nothing was lost — try again in a moment.", icon = lucide_react_1.AlertTriangle, onRetry, retryLabel = "Retry", isRetrying = false, action, size = "md", minH, }) => {
+    const actions = onRetry || action ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onRetry && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "outline", colorScheme: "gray", label: retryLabel, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), isLoading: isRetrying, loadingText: retryLabel, onClick: onRetry })), action] })) : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "alert", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { colorScheme: "error", icon: icon, title: title, description: description, size: size, minH: minH, action: actions }) }));
+};
+exports.default = ErrorState;

package/dist/Components/QueryState/QueryStateBoundary.d.ts

@@ -0,0 +1,4 @@
+import type { QueryStateBoundaryProps } from "./QueryStateProps";
+/** Renders one of loading / error / empty / children for a content region; agnostic of the fetching library. */
+declare const QueryStateBoundary: ({ isLoading, error, isEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+export default QueryStateBoundary;

package/dist/Components/QueryState/QueryStateBoundary.js

@@ -0,0 +1,25 @@
+"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 react_1 = require("@chakra-ui/react");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const ErrorState_1 = __importDefault(require("./ErrorState"));
+const DefaultLoading = () => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "status", direction: "column", gap: 4, w: "100%", py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: "Loading" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "40%" }), Array.from({ length: 4 }, (_, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "70%" })] }, i)))] }));
+const hasError = (error) => error !== undefined && error !== null && error !== false;
+/** Renders one of loading / error / empty / children for a content region; agnostic of the fetching library. */
+const QueryStateBoundary = ({ isLoading = false, error, isEmpty = false, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : (0, jsx_runtime_1.jsx)(DefaultLoading, {}) });
+    if (hasError(error)) {
+        const description = typeof errorDescription === "function" ? errorDescription(error) : errorDescription;
+        return ((0, jsx_runtime_1.jsx)(ErrorState_1.default, { title: errorTitle, description: description, onRetry: onRetry, isRetrying: isRetrying, minH: minH }));
+    }
+    if (isEmpty)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyFallback !== null && emptyFallback !== void 0 ? emptyFallback : (0, jsx_runtime_1.jsx)(EmptyState_1.default, { minH: minH, ...empty }) });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof children === "function" ? children() : children });
+};
+exports.default = QueryStateBoundary;

package/dist/Components/QueryState/QueryStateProps.d.ts

@@ -0,0 +1,48 @@
+import type { ElementType, ReactNode } from "react";
+import type { EmptyStateProps } from "../EmptyState/EmptyStateProps";
+/** Failed-load panel (`role="alert"`); `onRetry` adds an outline Retry button, `action` adds more. */
+export interface ErrorStateProps {
+    /** Defaults to "Couldn't load this". */
+    title?: string;
+    /** Defaults to a generic "something went wrong, try again" line. */
+    description?: string;
+    /** Icon component in the error-tinted badge; defaults to AlertTriangle. */
+    icon?: ElementType;
+    /** Renders an outline Retry button; omit it and no retry button appears. */
+    onRetry?: () => void;
+    /** Retry button text; defaults to "Retry". */
+    retryLabel?: string;
+    /** Puts the Retry button in its loading state; no effect without `onRetry`. */
+    isRetrying?: boolean;
+    /** Extra node(s) rendered after the Retry button. */
+    action?: ReactNode;
+    /** Passed to EmptyState; defaults to "md". */
+    size?: EmptyStateProps["size"];
+    minH?: EmptyStateProps["minH"];
+}
+/** Picks loading → error → empty → children; `children` may be a function so data is read only when ready. */
+export interface QueryStateBoundaryProps {
+    /** Checked first — wins over error and empty. */
+    isLoading?: boolean;
+    /** Anything except undefined, null or false shows the error state — so 0 and "" count. */
+    error?: unknown;
+    /** Checked only after loading and error are ruled out. */
+    isEmpty?: boolean;
+    /** Replaces the default skeleton rows. */
+    loadingFallback?: ReactNode;
+    /** Replaces the default EmptyState entirely; `empty` is then ignored. */
+    emptyFallback?: ReactNode;
+    /** Props for the default EmptyState; ignored when `emptyFallback` is set. */
+    empty?: EmptyStateProps;
+    /** Overrides ErrorState's default title. */
+    errorTitle?: string;
+    /** Static text, or a function of the error to derive it; ErrorState's default when omitted. */
+    errorDescription?: string | ((error: unknown) => string);
+    /** Adds a Retry button to the error state. */
+    onRetry?: () => void;
+    /** Shows the Retry button spinner; no effect without `onRetry`. */
+    isRetrying?: boolean;
+    /** Min height of the error and default empty states, not loading; defaults to "24rem". */
+    minH?: EmptyStateProps["minH"];
+    children: ReactNode | (() => ReactNode);
+}

package/dist/Components/QueryState/QueryStateProps.js

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

package/dist/Components/RadioButton/RadioButton.d.ts

@@ -1,4 +1,4 @@
 import { ChakraRadioProps, ChakraRadioGroupProps } from "./RadioButtonProps";
-declare const RadioButton: ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize, labelClampLines, showLabelTooltip, labelTooltip, }: ChakraRadioProps) => import("react/jsx-runtime").JSX.Element;
-declare const RadioButtonGroup: ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction, align, labelFontSize, labelClampLines, showLabelTooltip, }: ChakraRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioButton: ({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize, labelClampLines, showLabelTooltip, labelTooltip, ...rest }: ChakraRadioProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioButtonGroup: ({ options, children, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction, align, labelFontSize, labelClampLines, showLabelTooltip, label, "aria-label": ariaLabel, name, id, error, errorMessage, helperText, isRequired, }: ChakraRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export { RadioButton, RadioButtonGroup };

package/dist/Components/RadioButton/RadioButton.js

@@ -1,29 +1,50 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButtonGroup = exports.RadioButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
-const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.75rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, }) => {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
-            borderColor: theme.colors.primary[500],
-            backgroundColor: theme.colors.background[100],
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const RadioButton = ({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.875rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, ...rest }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    // colorScheme is any Chakra scheme name; only some resolve to a real scale.
+    const scales = colors;
+    const palette = (colorScheme && scales[colorScheme]) || colors.primary;
+    const filled = (0, filledSurface_1.resolveFilledSurface)(palette, colors);
+    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { ...rest, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors), borderWidth: "1px", _hover: {
+            borderColor: filled.fill,
+            backgroundColor: colors.background[100],
+        }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), _invalid: { borderColor: colors.semanticText.error }, _disabled: {
+            bg: colors.background[100],
+            borderColor: colors.boxborder[500],
+            opacity: 1,
+            cursor: "not-allowed",
         }, sx: {
             "&[data-checked]": {
-                backgroundColor: theme.colors.primary[500],
-                borderColor: theme.colors.primary[500]
+                backgroundColor: filled.fill,
+                borderColor: filled.fill,
             },
             "&[data-checked]:hover": {
-                backgroundColor: theme.colors.primary[500],
-                borderColor: theme.colors.primary[500],
-                boxShadow: `0 0 0 2px ${theme.colors.primary[200]}`,
+                backgroundColor: filled.hoverFill,
+                borderColor: filled.hoverFill,
+            },
+            "&[data-checked][data-disabled]": {
+                backgroundColor: colors.background[100],
+                borderColor: colors.boxborder[500],
             },
-        }, children: (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }), description && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "block", fontSize: "0.75rem", color: colors.textMuted, mt: "0.125rem", children: description })), content] }) }));
 };
 exports.RadioButton = RadioButton;
-const RadioButtonGroup = ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, }) => {
-    return ((0, jsx_runtime_1.jsx)(react_1.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: options.map((option) => ((0, jsx_runtime_1.jsx)(RadioButton, { label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }));
+const RadioButtonGroup = ({ options, children, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, label, "aria-label": ariaLabel, name, id, error, errorMessage, helperText, isRequired = false, }) => {
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [label && ((0, jsx_runtime_1.jsx)(react_1.Box, { id: ids.labelId, children: (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired }) })), (0, jsx_runtime_1.jsx)(react_1.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, name: name, id: ids.inputId, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, "aria-describedby": ids.describedBy, "aria-invalid": error || undefined, "aria-required": isRequired || undefined, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: children !== null && children !== void 0 ? children : options === null || options === void 0 ? void 0 : options.map((option) => ((0, jsx_runtime_1.jsx)(RadioButton, { label: option.label, description: option.description, content: typeof option.content === "function" ? option.content(option) : option.content, value: option.id, isDisabled: isDisabled, isInvalid: error, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 exports.RadioButtonGroup = RadioButtonGroup;

package/dist/Components/RadioButton/RadioButtonProps.d.ts

@@ -1,21 +1,67 @@
+import { ReactNode } from 'react';
 import { RadioProps, RadioGroupProps } from '@chakra-ui/react';
-export type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChecked" | "onChange" | "isDisabled" | "value" | "defaultChecked"> & {
+/** A single radio; every other Chakra `Radio` prop (`name`, `id`, `aria-*`, `data-*`, `isInvalid`) is spread onto it. Joins a RadioButtonGroup (or a hand-built `ChakraRadioGroup`) via Chakra's own context — this package no longer exports Chakra's `RadioGroup`. */
+export type ChakraRadioProps = Omit<RadioProps, "children" | "content"> & {
     label: string;
+    /** Muted second line under the label, for a description without a custom `content` node. */
+    description?: string;
+    /** Escape hatch for arbitrary content under the label/description — a card layout, a badge, any node. */
+    content?: ReactNode;
+    /** Defaults to "0.875rem" (14px). */
     labelFontSize?: string;
+    /** Clamps the label with an ellipsis; defaults to 2 lines. */
     labelClampLines?: number;
+    /** Defaults to true when `label` is longer than 18 characters. */
     showLabelTooltip?: boolean;
+    /** Tooltip text; defaults to `label`. */
     labelTooltip?: string;
 };
-export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
-    options: {
+/** One `options` entry; `content` may be a static node or a function of the option, for state that depends on the option itself. */
+export type RadioOption = {
+    label: string;
+    id: string;
+    /** Muted second line under the label. */
+    description?: string;
+    /** Rich per-option content — a card layout, an icon, a badge — rendered under label/description. */
+    content?: ReactNode | ((option: {
         label: string;
         id: string;
-    }[];
+        description?: string;
+    }) => ReactNode);
+};
+/** Unlike ChakraRadioProps, showLabelTooltip may be a per-option predicate `(item) => boolean`, evaluated once per rendered option. */
+export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
+    /** Each option's `id` is its radio value and React key. Optional when `children` is given instead. */
+    options?: RadioOption[];
+    /** Fully custom radios instead of `options`, for layouts an option list can't express; wins when both are given. */
+    children?: ReactNode;
+    /** Fires with the selected option's `id`. */
     onChange?: (value: string) => void;
+    /** Visible group label; names the `role="radiogroup"` via aria-labelledby. Without it, pass `aria-label`. */
+    label?: string;
+    /** Accessible name when there is no visible `label`. */
+    "aria-label"?: string;
+    /** Native `name` shared by every radio, so the group submits with a form. */
+    name?: string;
+    /** Base id for the group's label and message ids; generated when omitted. */
+    id?: string;
+    /** Marks every radio invalid and shows `errorMessage` in place of `helperText`. */
+    error?: boolean;
+    /** Shown under the group while `error` is true; falls back to "Error". */
+    errorMessage?: string;
+    /** Shown under the group when there is no error; linked via aria-describedby. */
+    helperText?: string;
+    /** Draws the label asterisk and sets `aria-required` on the group. */
+    isRequired?: boolean;
+    /** Stack spacing between radios; defaults to "2". */
     spacing?: string;
+    /** Defaults to "row". */
     direction?: "row" | "column";
+    /** Cross-axis alignment of the stack; "" (default) leaves it unset. */
     align?: "start" | "center" | "end" | "";
+    /** Forwarded to every radio; defaults to "0.875rem". */
     labelFontSize?: string;
+    /** Forwarded to every radio; defaults to 2 lines. */
     labelClampLines?: number;
     showLabelTooltip?: boolean | ((item: {
         label: string;

package/dist/Components/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,4 @@
+import type { RangeSliderRangeProps, RangeSliderSingleProps } from "./RangeSliderProps";
+declare function RangeSlider(props: RangeSliderSingleProps): JSX.Element;
+declare function RangeSlider(props: RangeSliderRangeProps): JSX.Element;
+export default RangeSlider;