pixelize-design-library 2.4.2-beta.59 → 2.4.2-beta.60

package/dist/Components/QueryState/QueryStateBoundary.js

@@ -5,15 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (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 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)
+/** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
+const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden, hasData = false, error, isEmpty = false, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
+    var _a, _b, _c;
+    if (isLoading && !hasData)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : (0, jsx_runtime_1.jsx)(DefaultLoading, {}) });
+    const forbiddenNow = typeof isForbidden === "function" ? hasError(error) && isForbidden(error) : isForbidden;
+    if (forbiddenNow) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { colorScheme: "gray", icon: (_a = forbidden === null || forbidden === void 0 ? void 0 : forbidden.icon) !== null && _a !== void 0 ? _a : lucide_react_1.Lock, title: (_b = forbidden === null || forbidden === void 0 ? void 0 : forbidden.title) !== null && _b !== void 0 ? _b : "You don't have access", description: (_c = forbidden === null || forbidden === void 0 ? void 0 : forbidden.description) !== null && _c !== void 0 ? _c : "Ask an administrator to give you access to view this.", action: forbidden === null || forbidden === void 0 ? void 0 : forbidden.action, minH: minH }) }));
+    }
     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 }));

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

@@ -20,10 +20,27 @@ export interface ErrorStateProps {
     size?: EmptyStateProps["size"];
     minH?: EmptyStateProps["minH"];
 }
-/** Picks loading → error → empty → children; `children` may be a function so data is read only when ready. */
+/** Copy for the no-access panel; each field falls back to a generic default. */
+export interface QueryStateForbiddenProps {
+    /** Defaults to "You don't have access". */
+    title?: string;
+    /** Defaults to a line asking the reader to request access. */
+    description?: string;
+    /** Defaults to a lock icon. */
+    icon?: ElementType;
+    /** Node(s) under the description, e.g. a "Request access" button. */
+    action?: ReactNode;
+}
+/** Picks loading → forbidden → 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. */
+    /** Checked first — wins over forbidden, error and empty — unless `hasData` is true. */
     isLoading?: boolean;
+    /** Shown after loading, before error (e.g. HTTP 403); a function is only called when `error` is set. */
+    isForbidden?: boolean | ((error: unknown) => boolean);
+    /** Copy and action for the no-access panel (`role="status"`, never error-tinted). */
+    forbidden?: QueryStateForbiddenProps;
+    /** True keeps children on screen during a refetch instead of the loading state. Default false. */
+    hasData?: 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. */

package/dist/Components/SectionRail/SectionRail.d.ts

@@ -0,0 +1,3 @@
+import type { SectionRailProps } from "./SectionRailProps";
+declare const SectionRail: ({ sections, activeId, onSelect, "aria-label": ariaLabel, dirtyHint, collapseBelow, }: SectionRailProps) => import("react/jsx-runtime").JSX.Element;
+export default SectionRail;

package/dist/Components/SectionRail/SectionRail.js

@@ -0,0 +1,49 @@
+"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("react");
+const react_2 = require("@chakra-ui/react");
+const Select_1 = __importDefault(require("../Select/Select"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const FALLBACK_BREAKPOINTS = { sm: "30em", md: "48em", lg: "62em" };
+const matchesMinWidth = (query) => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : true;
+const useMinWidth = (minWidth) => {
+    const query = `(min-width: ${minWidth})`;
+    const [matches, setMatches] = (0, react_1.useState)(() => matchesMinWidth(query));
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+            return undefined;
+        const list = window.matchMedia(query);
+        const update = () => setMatches(list.matches);
+        update();
+        (_a = list.addEventListener) === null || _a === void 0 ? void 0 : _a.call(list, "change", update);
+        return () => { var _a; return (_a = list.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(list, "change", update); };
+    }, [query]);
+    return matches;
+};
+const SectionRail = ({ sections, activeId, onSelect, "aria-label": ariaLabel, dirtyHint, collapseBelow = "md", }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { breakpoints } = (0, react_2.useTheme)();
+    const isRail = useMinWidth((_a = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints[collapseBelow]) !== null && _a !== void 0 ? _a : FALLBACK_BREAKPOINTS[collapseBelow]);
+    const rows = (0, rowStates_1.listRowBackgrounds)(colors);
+    if (!isRail) {
+        return ((0, jsx_runtime_1.jsx)(Select_1.default, { "aria-label": ariaLabel, width: "100%", value: activeId, options: sections.map((section) => ({
+                id: section.id,
+                label: section.isDirty ? `${section.label} (${dirtyHint})` : section.label,
+            })), onChange: (option) => option && onSelect(String(option.id)) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "nav", "aria-label": ariaLabel, direction: "column", gap: "2px", children: sections.map((section) => {
+            const isActive = section.id === activeId;
+            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 2, minH: "2rem", px: 3, py: 1.5, borderRadius: "md", fontSize: "sm", fontWeight: isActive ? 600 : 500, textAlign: "left", "aria-current": isActive ? "true" : undefined, bg: isActive ? rows.selected : "transparent", color: isActive ? colors.accentText : colors.text[800], transition: (0, motion_1.transitionFor)(["background-color", "color"]), _hover: { bg: isActive ? rows.selectedActive : rows.active }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), sx: (0, motion_2.reducedMotionSx)(), onClick: () => onSelect(section.id), children: [section.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, children: section.icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", noOfLines: 1, flex: "1", minW: 0, children: section.label }), section.isDirty ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: "6px", borderRadius: "full", flexShrink: 0, bg: colors.semanticText.warning }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: dirtyHint })] })) : null] }, section.id));
+        }) }));
+};
+exports.default = SectionRail;

package/dist/Components/SectionRail/SectionRailProps.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+/** One entry in a SectionRail. */
+export interface RailSection {
+    id: string;
+    label: string;
+    /** Decorative leading icon, hidden from assistive tech; the label carries the name. */
+    icon?: ReactNode;
+    /** Shows a dot, and `dirtyHint` to screen readers, on a section holding unsaved edits. */
+    isDirty?: boolean;
+}
+/** Props for the section navigation of a long settings screen: a rail on wide viewports, a Select below `collapseBelow`. */
+export interface SectionRailProps {
+    sections: RailSection[];
+    /** Id of the current section; marked `aria-current="true"` (and selected in the Select). */
+    activeId: string;
+    onSelect: (id: string) => void;
+    /** Accessible name of the nav and of the collapsed Select. */
+    "aria-label": string;
+    /** Visually hidden text announced after a dirty section's label, e.g. "Unsaved changes". */
+    dirtyHint: string;
+    /** Viewports narrower than this breakpoint render a Select instead of the rail; defaults to "md". */
+    collapseBelow?: "sm" | "md" | "lg";
+}

package/dist/Components/SectionRail/SectionRailProps.js

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

package/dist/Components/SectionRail/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SectionRail } from "./SectionRail";
+export type { RailSection, SectionRailProps } from "./SectionRailProps";

package/dist/Components/SectionRail/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionRail = void 0;
+var SectionRail_1 = require("./SectionRail");
+Object.defineProperty(exports, "SectionRail", { enumerable: true, get: function () { return __importDefault(SectionRail_1).default; } });

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -43,18 +43,17 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
     const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
     // Concentric: an inset child keeping the parent's radius bulges at the corners.
     const innerRadius = isUnderlineSlide ? "none" : `calc(${radii.lg} - ${TRACK_PADDING})`;
-    const focusShadow = (0, segmentedInk_1.segmentedFocusShadow)(colors, trackSurface);
     // Inset, never a border: a border consumes the content box and the absolute pill stops centring.
     const plateEdge = isBrandSlide
         ? `inset 0 0 0 1px ${(0, segmentedInk_1.segmentedPlateEdge)(colors, surface)}`
         : undefined;
-    // The transparent outline replaces the UA ring and is what Windows high-contrast repaints.
-    const segmentFocus = {
-        outline: "2px solid transparent",
-        outlineOffset: "2px",
-        // underlineSlide has no track chrome to carry the indicator, so there the segment wears it.
-        ...(isUnderlineSlide ? { boxShadow: focusShadow } : {}),
-    };
+    // underlineSlide has no track chrome to carry the ring, so there the segment wears Button's own.
+    const noRing = { outline: "2px solid transparent", outlineOffset: "2px" };
+    const segmentFocus = isUnderlineSlide
+        ? (0, focusRing_styles_1.focusVisibleStyles)(colors)
+        : { _focusVisible: noRing, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: noRing };
+    const ring = (0, focusRing_styles_1.focusRingShadow)(colors);
+    const trackFocusShadow = plateEdge ? `${plateEdge}, ${ring}` : ring;
     const [showFocus, setShowFocus] = (0, react_1.useState)(false);
     const selectedIndex = options.findIndex((o) => o.value === value);
     const enabled = options.reduce((acc, o, i) => (o.isDisabled ? acc : [...acc, i]), []);
@@ -96,7 +95,7 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : "-0.0625rem", left: isVertical ? "-0.0625rem" : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? trackFocusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : "-0.0625rem", left: isVertical ? "-0.0625rem" : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
                 const isSelected = option.value === value;
                 const showShortLabel = isCompact && !!option.shortLabel;
                 const displayLabel = showShortLabel ? option.shortLabel : option.label;
@@ -116,10 +115,6 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
                             : restInk
                         : isSelected
                             ? selectedInk
-                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: {
-                        _focusVisible: segmentFocus,
-                        [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: segmentFocus,
-                        ...(0, motion_2.reducedMotionSx)(),
-                    }, children: [option.icon, displayLabel, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
+                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: { ...segmentFocus, ...(0, motion_2.reducedMotionSx)() }, children: [option.icon, displayLabel, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }

package/dist/Components/SegmentedControl/segmentedInk.d.ts

@@ -6,8 +6,6 @@ export declare const segmentedTrackSurface: (variant: SegmentedControlVariant, c
 export declare const segmentedSelectedSurface: (variant: SegmentedControlVariant, colors: PaletteProps, trackSurface: string) => string;
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 export declare const segmentedRestInk: (colors: PaletteProps, trackSurface: string) => string;
-/** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
-export declare const segmentedFocusShadow: (colors: PaletteProps, trackSurface: string) => string;
 /** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
 export declare const segmentedPlateEdge: (colors: PaletteProps, surface?: string) => string;

package/dist/Components/SegmentedControl/segmentedInk.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.segmentedPlateEdge = exports.segmentedFocusShadow = exports.segmentedRestInk = exports.segmentedSelectedSurface = exports.segmentedTrackSurface = void 0;
-const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+exports.segmentedPlateEdge = exports.segmentedRestInk = exports.segmentedSelectedSurface = exports.segmentedTrackSurface = void 0;
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 /** The surface a segment's label really sits on. */
@@ -21,9 +20,6 @@ exports.segmentedSelectedSurface = segmentedSelectedSurface;
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 const segmentedRestInk = (colors, trackSurface) => (0, outlineRung_1.liftToContrast)(colors.text[600], trackSurface, accentText_1.AA_NORMAL_TEXT);
 exports.segmentedRestInk = segmentedRestInk;
-/** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
-const segmentedFocusShadow = (colors, trackSurface) => `inset 0 0 0 1px ${(0, outlineRung_1.liftToContrast)(colors.primary[500], trackSurface, outlineRung_1.AA_NON_TEXT)}, ${(0, focusRing_styles_1.focusGlowShadow)(colors)}`;
-exports.segmentedFocusShadow = segmentedFocusShadow;
 /** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
 const segmentedPlateEdge = (colors, surface) => (0, outlineRung_1.liftToContrast)(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT);

package/dist/Components/StatCard/StatCard.d.ts

@@ -1,4 +1,4 @@
 import type { StatCardProps } from "./StatCardProps";
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-declare const StatCard: ({ label, value, delta, trend, goodDirection, hint, sparkline, footer, icon: Icon, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatCard: ({ label, value, delta, trend, goodDirection, hint, sparkline, footer, icon: Icon, iconTone, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
 export default StatCard;

package/dist/Components/StatCard/StatCard.js

@@ -7,13 +7,14 @@ 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 tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const StatCardSkeleton = ({ hasIcon }) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [hasIcon && (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 8, width: 8 }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 7, width: "55%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "45%" })] }));
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isInteractive = !!onClick && !isLoading;
     const deltaColor = trend
@@ -22,6 +23,9 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, spar
             : colors.semanticText.error
         : colors.textMuted;
     const DeltaIcon = trend === "down" ? lucide_react_1.ArrowDownRight : lucide_react_1.ArrowUpRight;
+    const chip = iconTone
+        ? (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, iconTone), colors.background[50])
+        : { bg: colors.primary.opacity[8], fg: colors.accentText };
     const surface = {
         display: "block",
         w: "100%",
@@ -33,7 +37,7 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, spar
         px: 5,
         py: 4,
     };
-    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: colors.primary.opacity[8], color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), sparkline && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
+    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), sparkline && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
     if (!isInteractive) {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
     }

package/dist/Components/StatCard/StatCardProps.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType, MouseEventHandler, ReactNode } from "react";
+import type { Tone } from "../../Theme/tokens/builders/tone";
 type StatTrend = "up" | "down";
 /** KPI tile; delta is green when `trend` matches `goodDirection` (default "up"), else red. */
 export interface StatCardProps {
@@ -19,6 +20,8 @@ export interface StatCardProps {
     footer?: ReactNode;
     /** Icon component (not an element) shown in a tinted chip before the label. */
     icon?: ElementType;
+    /** Paints the icon chip with a soft status tone; unset keeps the brand-primary chip, "neutral" is grey. */
+    iconTone?: Tone;
     /** Shows a skeleton and disables the click target. */
     isLoading?: boolean;
     /** Turns the tile into a full-size button with hover and focus styles. */

package/dist/Components/StatusTag/StatusTag.d.ts

@@ -0,0 +1,4 @@
+import type { StatusTagProps } from "./StatusTagProps";
+/** Typed status-to-Tag wrapper: map your vocabulary to tones once, render chips or dots everywhere. */
+declare function StatusTag<S extends string>({ status, label, map, display, size, "data-testid": testId, }: StatusTagProps<S>): import("react/jsx-runtime").JSX.Element;
+export default StatusTag;

package/dist/Components/StatusTag/StatusTag.js

@@ -0,0 +1,24 @@
+"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 Tag_1 = __importDefault(require("../Tag/Tag"));
+const NEUTRAL = { tone: "neutral" };
+const warned = new Set();
+const warnUnknown = (status) => {
+    if (process.env.NODE_ENV === "production" || warned.has(status))
+        return;
+    warned.add(status);
+    console.warn(`StatusTag: no appearance mapped for status "${status}"; rendering neutral.`);
+};
+/** Typed status-to-Tag wrapper: map your vocabulary to tones once, render chips or dots everywhere. */
+function StatusTag({ status, label, map, display = "chip", size = "sm", "data-testid": testId, }) {
+    const known = Object.prototype.hasOwnProperty.call(map, status);
+    if (!known)
+        warnUnknown(status);
+    const { tone, variant } = known ? map[status] : NEUTRAL;
+    return (0, jsx_runtime_1.jsx)(Tag_1.default, { label: label, tone: tone, variant: variant, display: display, size: size, "data-testid": testId });
+}
+exports.default = StatusTag;

package/dist/Components/StatusTag/StatusTagProps.d.ts

@@ -0,0 +1,20 @@
+import type { Tone } from "../../Theme/tokens/builders/tone";
+import type { TagDisplay, TagVariant } from "../Tag/TagProps";
+/** How one status looks: a tone, plus the chip variant (ignored in dot display). */
+export type StatusAppearance = {
+    tone: Tone;
+    variant?: TagVariant;
+};
+/** Props for StatusTag; `S` is the app's status union so `map` must cover every status. */
+export interface StatusTagProps<S extends string = string> {
+    /** The raw status value; one missing from `map` renders neutral and warns once in development. */
+    status: S;
+    /** Visible text; the app owns translation, StatusTag never derives it from `status`. */
+    label: string;
+    /** Status vocabulary to appearance, declared once per app. */
+    map: Record<S, StatusAppearance>;
+    /** "dot" gives a quiet dot plus label; default "chip". */
+    display?: TagDisplay;
+    size?: "sm" | "md";
+    "data-testid"?: string;
+}

package/dist/Components/StatusTag/StatusTagProps.js

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

package/dist/Components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import { TableProps } from "./TableProps";
 /** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, freezedBgColor, freezedTextColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, variant, stripe, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, freezedBgColor, freezedTextColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, variant, stripe, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch, }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Table/Table.js

@@ -25,6 +25,7 @@ const rowMetrics_1 = require("./components/rowMetrics");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const scrollShadow_1 = require("../../Theme/tokens/builders/scrollShadow");
 const useTable_1 = __importDefault(require("./hooks/useTable"));
+const useRowExpansion_1 = require("./hooks/useRowExpansion");
 const columnLabel_1 = require("./columnLabel");
 const table_1 = require("../../Utils/table");
 const usePreferences_1 = require("../../Hooks/usePreferences");
@@ -45,12 +46,15 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
     name: "",
     page: "",
     orgId: "",
-}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
     var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const clearFiltersTone = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.semantic.error, theme.colors), [theme.colors]);
     const variantTokens = (0, react_1.useMemo)(() => variants_1.TABLE_VARIANTS[variant](theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
+    const detailIdPrefix = (0, react_1.useId)();
+    const { expandedIds, toggle: toggleDetail } = (0, useRowExpansion_1.useRowExpansion)(expandedRows, onExpandedRowsChange);
+    const rowDetail = (0, react_1.useMemo)(() => (renderRowDetail ? { render: renderRowDetail, toggle: toggleDetail, idPrefix: detailIdPrefix } : undefined), [renderRowDetail, toggleDetail, detailIdPrefix]);
     const tableContainerRef = (0, react_1.useRef)(null);
     const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = (0, react_2.useDisclosure)();
     // Below `md` the sidebar has no room — default to the modal, unless the consumer picked a mode.
@@ -448,5 +452,5 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

package/dist/Components/Table/TableProps.d.ts

@@ -28,6 +28,12 @@ export type TableProps = {
     density?: TableDensity;
     /** Visual preset. Defaults to `classic` — the table exactly as it shipped. */
     variant?: TableVariant;
+    /** Content shown under a row when expanded; return null for rows with no detail and they get no chevron. Memoize it: an inline function re-renders every row. */
+    renderRowDetail?: (row: DataObject) => ReactNode | null;
+    /** Controlled expanded row ids; omit for uncontrolled. */
+    expandedRows?: (string | number)[];
+    /** Fires with the full expanded id list on every chevron toggle, controlled or not. */
+    onExpandedRowsChange?: (ids: (string | number)[]) => void;
     /** Zebra rows: every second row gets the variant's `row.stripeBg` fill. Frozen and selected cells keep their own fill. */
     stripe?: boolean;
     /** Shown when there are no rows. An object feeds the library `EmptyState`; any other node renders as-is. */
@@ -207,6 +213,12 @@ export type ColumnSortingProps = {
     column: string | number;
     direction: "asc" | "desc" | "none";
 };
+/** Internal wiring for the row-detail expander, built once by `Table`. */
+export type TableRowDetail = {
+    render: (row: DataObject) => ReactNode | null;
+    toggle: (id: string | number) => void;
+    idPrefix: string;
+};
 /** Props for the TableHeader row subcomponent: all columns, sorting, search, freeze, selection. */
 export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
@@ -225,6 +237,8 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     checked: boolean | "indeterminate";
     isContent: boolean;
     isLink: boolean;
+    /** Adds the empty chevron column header after the checkbox. */
+    hasDetail?: boolean;
     setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
     columnsSearch: Record<string, string>;
     isSelecting?: boolean;
@@ -241,6 +255,10 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     selections: (string | number)[];
     isContent: boolean;
     isLink: boolean;
+    /** Row-detail expander wiring; omitted when `renderRowDetail` is not used. */
+    rowDetail?: TableRowDetail;
+    /** Ids of the rows whose detail is open. */
+    expandedIds?: Set<string | number>;
     scrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
     /** Optional per-row id → accent color (Monday group stripe). */
     accentColors?: Record<string | number, string>;
@@ -273,6 +291,8 @@ export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "noBorders"> & P
     index: number;
     columnWidths: number[];
     slotWidth: number;
+    /** Width of the detail chevron column to the left of frozen columns; 0 when absent. */
+    detailWidth?: number;
     headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnsSearch: Record<string, string>;
     setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;

package/dist/Components/Table/components/TableBody.d.ts

@@ -1,4 +1,4 @@
 import { TableBodyPageProps } from "../TableProps";
 export declare const findFirstVisibleIndex: (offsets: number[], total: number, target: number) => number;
-declare const TableBody: ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe, accentColors, groups, onAddItem, emptyState, }: TableBodyPageProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableBody: ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe, accentColors, groups, onAddItem, emptyState, rowDetail, expandedIds, }: TableBodyPageProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;