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

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -1,25 +1,36 @@
 import { CustomThemeProps } from "../../Theme/themeProps";
+/** Size preset keying each renderer's own pixel/spacing lookup table. */
 export type StageSize = "sm" | "md" | "lg";
+/** Palette key: brand colors resolve direct, others (success/error/warning/info) via theme.colors.semantic. */
 export type StageColorScheme = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+/** Per-stage render state; StageProgress derives it from index vs. the active stage. */
 export type StageState = "completed" | "active" | "upcoming";
 /** Visual style of the tracker. */
 export type StageVariant = "chevron" | "bar" | "pills" | "stepper";
+/** One entry in StageProgressProps.stages — the ordered pipeline this tracker renders. */
 export interface Stage {
+    /** Compared to `value` via strict `===`; a numeric id vs a string `value` never matches. */
     id: string | number;
+    /** Truncates with an ellipsis (or a tooltip) under chevron/bar/pills; wraps to 2 lines under stepper. */
     label: string;
-    /** Disable selecting this stage individually. */
+    /** Disable selecting this stage individually; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
 }
+/** Top-level props for StageProgress; per-item rendering is delegated to StageItemProps/StepperStageProps. */
 export interface StageProgressProps {
     /** Ordered list of pipeline stages. */
     stages: Stage[];
     /** Visual style. Default "chevron". */
     variant?: StageVariant;
-    /** id of the currently active stage. */
+    /** Must exactly match a stage.id — no match silently renders every stage as "upcoming" (nothing active). */
     value?: string | number;
-    /** Fired when a stage is clicked (ignored when isReadOnly). */
+    /** Skipped when isReadOnly, or when that specific stage's own `disabled` is true. */
     onChange?: (id: string | number, stage: Stage, index: number) => void;
+    /** Default "md"; also sets the loading skeleton's row height. */
     size?: StageSize;
+    /** Default "primary"; resolved per stage via resolveStagePalette, not applied directly. */
     colorScheme?: StageColorScheme;
     /** Render stages before the active one in a distinct "done" style. Default true. */
     markCompleted?: boolean;
@@ -29,56 +40,92 @@ export interface StageProgressProps {
     isReadOnly?: boolean;
     /** Show the loading skeleton row instead of stages. */
     isLoading?: boolean;
-    /** Min width of each chevron. */
+    /** Ignored for variant="stepper" (fixed per-size circle width there) — applies to chevron/bar/pills only. */
     minStageWidth?: string;
     /** Auto-scroll the active stage into view. Default true. */
     scrollActiveIntoView?: boolean;
-    /** Label length beyond which a tooltip is shown. Default 20. */
+    /** Also only applies to chevron/bar/pills — variant="stepper" never shows a tooltip, however long the label. */
     tooltipThreshold?: number;
 }
+/** Props for one chevron/bar/pills stage; variant="stepper" renders StepperStage/StepperStageProps instead. */
 export interface StageItemProps {
+    /** Ellipsis-truncates in the fixed-width box; see tooltipThreshold for when a tooltip also appears. */
     label: string;
+    /** 0-based position; with total, picks the chevron's first/last point shape. */
     index: number;
+    /** Stage count; with index, drives first/last chevron-point and bar-corner rounding. */
     total: number;
     state: StageState;
     /** "chevron" | "bar" | "pills" (stepper has its own renderer). */
     variant?: Exclude<StageVariant, "stepper">;
+    /** Default "md"; keys this stage's own pixel/spacing lookup table. */
     size?: StageSize;
+    /** Default "primary"; passed straight into resolveStagePalette for this stage. */
     colorScheme?: StageColorScheme;
+    /** Called with no args — StageProgress wraps id/stage/index into this closure itself. */
     onClick?: () => void;
+    /** Disables all interactivity without dimming opacity (unlike disabled). */
     isReadOnly?: boolean;
+    /** Disables just this stage and dims it to 0.55 opacity; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
+    /** Adds a check icon before the label only when this stage is completed. */
     showCheck?: boolean;
+    /** Falls back to this size's own fixed minW when unset, not to content width. */
     minWidth?: string;
+    /** Only scrolls when this item's own state is "active" — a no-op otherwise. */
     scrollIntoViewWhenActive?: boolean;
+    /** Character count (not pixels) above which the label swaps to a hover tooltip. */
     tooltipThreshold?: number;
 }
+/** Props for one stepper-variant node; leftDone/rightDone fill the connector line per side. */
 export interface StepperStageProps {
+    /** Wraps up to 2 lines (noOfLines=2) instead of truncating; ignores tooltipThreshold entirely. */
     label: string;
     /** 1-based step number shown inside the circle. */
     number: number;
     state: StageState;
+    /** Default "md"; keys this node's own circle/font/minWidth lookup table. */
     size?: StageSize;
+    /** Default "primary"; passed straight into resolveStagePalette for this node. */
     colorScheme?: StageColorScheme;
+    /** Called with no args — StageProgress's own onChange(id, stage, index) is wrapped upstream. */
     onClick?: () => void;
+    /** Disables interactivity without dimming opacity (unlike disabled). */
     isReadOnly?: boolean;
+    /** Disables this node and dims it to 0.55 opacity; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
+    /** Defaults true here (unlike StageItem's false); StageProgress always overrides it explicitly. */
     showCheck?: boolean;
+    /** Hides (not shortens) the left connector line entirely, regardless of leftDone. */
     isFirst: boolean;
+    /** Hides (not shortens) the right connector line entirely, regardless of rightDone. */
     isLast: boolean;
     /** Connector entering this node is part of a completed segment. */
     leftDone: boolean;
     /** Connector leaving this node is part of a completed segment. */
     rightDone: boolean;
+    /** Only scrolls when this node's own state is "active" — a no-op otherwise. */
     scrollIntoViewWhenActive?: boolean;
 }
+/** Color set for one scheme's states, returned by resolveStagePalette (soft/strong/muted + text). */
 export interface StagePalette {
+    /** Background for "completed" stages, and the active stepper circle's outer glow ring. */
     soft: string;
+    /** Text/icon color for "completed" stages, contrast-walked against soft, not a fixed rung. */
     softText: string;
+    /** Background for "active" stages, and the hover fill for completed/upcoming stages. */
     strong: string;
+    /** Text/icon color on strong; picked between white/black per scheme to clear AA. */
     onStrong: string;
+    /** Hover-only background for an already-"active" stage; other states hover to strong instead. */
     hover: string;
+    /** Background for "upcoming" stages; also the unfilled stepper circle's border and idle connector line. */
     muted: string;
+    /** Text color for "upcoming" stages, chevron/bar/pills and stepper alike. */
     mutedText: string;
 }
 /** Resolve a chevron palette for a given color scheme from the theme. */

package/dist/Components/StageProgress/StageProgressProps.js

@@ -2,28 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveStagePalette = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 /** Exhaustive by construction: a new scheme that maps nowhere is a compile error. */
 const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
     ? colors[scheme]
     : colors.semantic[scheme];
 /** Resolve a chevron palette for a given color scheme from the theme. */
 const resolveStagePalette = (theme, colorScheme = "primary") => {
-    const { gray, white, black } = theme.colors;
+    const { gray } = theme.colors;
     const scale = scaleFor(theme.colors, colorScheme);
-    const strong = scale[500];
-    const onStrong = (0, accentText_1.onFilled)(strong, white, black);
+    const solid = (0, filledSurface_1.resolveFilledSurface)(scale, theme.colors);
+    const strong = solid.fill;
+    const onStrong = solid.color;
     const soft = scale[100];
     // A fixed [700] fails AA against [100] for some hues (orange 3.30, borderline green 3.58) —
     // walk the scale's own rungs against this specific tint instead.
     const softText = (0, accentText_1.accentTextOnCanvas)(scale, soft);
+    const muted = gray[100];
+    // A fixed gray[500] clears AA against the canvas but not against `muted` itself (gray[100]) on
+    // several brands — walk gray's own rungs against the actual upcoming-state fill instead.
+    const mutedText = (0, accentText_1.accentTextOnCanvas)(gray, muted);
     return {
         soft,
         softText,
         strong,
         onStrong,
-        hover: scale[600],
-        muted: gray[100],
-        mutedText: gray[500],
+        hover: solid.hoverFill,
+        muted,
+        mutedText,
     };
 };
 exports.resolveStagePalette = resolveStagePalette;

package/dist/Components/StageProgress/StepperStage.js

@@ -5,13 +5,16 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const StageProgressProps_1 = require("./StageProgressProps");
 const sizeMap = {
     sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
     md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
     lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
 };
-const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
     const ref = (0, react_1.useRef)(null);
@@ -31,10 +34,10 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const circleColor = filled ? palette.onStrong : palette.mutedText;
     const circleBorder = filled ? palette.strong : palette.muted;
     const line = (done, hidden) => ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
-                            ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }
-                            : undefined, children: showCheck && state === "completed" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 2, px: 1, fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, _groupHover: interactive ? { color: palette.strong } : undefined, children: label })] }));
+                            ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }
+                            : undefined, children: showCheck && state === "completed" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 2, px: 1, borderRadius: "sm", fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, transition: "background 0.18s ease, color 0.18s ease", _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
 };
 exports.default = StepperStage;

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

@@ -0,0 +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, icon: Icon, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+export default StatCard;

package/dist/Components/StatCard/StatCard.js

@@ -0,0 +1,42 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+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, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isInteractive = !!onClick && !isLoading;
+    const deltaColor = trend
+        ? trend === goodDirection
+            ? colors.semanticText.success
+            : colors.semanticText.error
+        : colors.textMuted;
+    const DeltaIcon = trend === "down" ? lucide_react_1.ArrowDownRight : lucide_react_1.ArrowUpRight;
+    const surface = {
+        display: "block",
+        w: "100%",
+        textAlign: "left",
+        bg: colors.background[50],
+        borderWidth: "1px",
+        borderColor: colors.boxborder[200],
+        borderRadius: "xl",
+        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.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 }), (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 }))] }))] }));
+    if (!isInteractive) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: (0, motion_1.transitionFor)(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: content }));
+};
+exports.default = StatCard;

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

@@ -0,0 +1,26 @@
+import type { ElementType, MouseEventHandler, ReactNode } from "react";
+type StatTrend = "up" | "down";
+/** KPI tile; delta is green when `trend` matches `goodDirection` (default "up"), else red. */
+export interface StatCardProps {
+    label: ReactNode;
+    /** Large tabular-number figure; pre-format it (currency, units) yourself. */
+    value: ReactNode;
+    /** Change text, e.g. "+12%"; muted unless `trend` is set. */
+    delta?: ReactNode;
+    /** Adds an arrow and SR "Up"/"Down" to the delta; no effect without `delta`. */
+    trend?: StatTrend;
+    /** Which trend counts as good (green); defaults to "up" — use "down" for costs or churn. */
+    goodDirection?: StatTrend;
+    /** Muted text beside the delta, e.g. "vs last month". */
+    hint?: ReactNode;
+    /** Icon component (not an element) shown in a tinted chip before the label. */
+    icon?: ElementType;
+    /** Shows a skeleton and disables the click target. */
+    isLoading?: boolean;
+    /** Turns the tile into a full-size button with hover and focus styles. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Applied only when `onClick` makes the tile a button. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}
+export {};

package/dist/Components/StatCard/StatCardProps.js

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

package/dist/Components/Switch/Switch.d.ts

@@ -1,2 +1,3 @@
 import { SwitchProps } from "./SwitchProps";
-export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+/** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Switch/Switch.js

@@ -1,14 +1,19 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Switch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }) {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // Read the palette directly: it is already swapped for the active mode, so pairing the rungs
-    // through useColorModeValue would adapt twice and pick a LIGHT rung on the dark canvas.
-    const highlightBg = theme.colors.primary[50];
-    const borderColor = theme.colors.gray[100];
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.background[50], border: "0.063rem solid", borderColor: borderColor, borderRadius: "1.25rem", p: "0.063rem", w: "12.5rem", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, bottom: 0, w: "50%", bg: highlightBg, border: `0.063rem solid ${theme.colors.primary[500]}`, borderRadius: "1rem", transition: "transform 0.3s ease", transform: switchActive === "left" ? "translateX(0%)" : "translateX(100%)" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "ul", listStyleType: "none", m: 0, p: "0.063rem", zIndex: 1, position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "left" ? 600 : 400, color: theme.colors.text[900], zIndex: 1, onClick: () => onSwitchToggle("left"), children: [leftIcon, (0, jsx_runtime_1.jsx)(react_1.Text, { ml: leftIcon ? 1 : 0, children: leftText })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "right" ? 600 : 400, color: theme.colors.text[900], zIndex: 1, onClick: () => onSwitchToggle("right"), children: [rightIcon, (0, jsx_runtime_1.jsx)(react_1.Text, { ml: rightIcon ? 1 : 0, children: rightText })] })] })] }));
+const SegmentedControl_1 = __importDefault(require("../SegmentedControl/SegmentedControl"));
+/** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
+function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }) {
+    const options = [
+        { value: "left", label: leftText, icon: leftIcon },
+        { value: "right", label: rightText, icon: rightIcon },
+    ];
+    // Unlabelled segments have nothing to size to, so the 12.5rem floor only overflowed its cell.
+    const hasLabels = Boolean(leftText || rightText);
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.default, { options: options, value: switchActive, onChange: onSwitchToggle, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
 }

package/dist/Components/Switch/SwitchProps.d.ts

@@ -1,8 +1,15 @@
+/** @deprecated Use `SegmentedControl` — this two-option pill is kept only for existing call sites. */
 export type SwitchProps = {
     leftText: string;
     rightText: string;
     leftIcon?: JSX.Element;
     rightIcon?: JSX.Element;
+    /** Fires on click and on arrow/Home/End keys with the newly selected side. */
     onSwitchToggle: (value: "left" | "right") => void;
+    /** Controlled selected side; the pill only moves when this changes. */
     switchActive: "left" | "right";
+    /** Background this sits on. Optional: the track is opaque on any backdrop; pass it only to aim the plate's hairline edge at the real backdrop. */
+    surface?: string;
+    /** Names the radiogroup; pass it, as there is no visible group label. */
+    "aria-label"?: string;
 };

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

@@ -1,2 +1,3 @@
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, 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, stripe, groupColors, onAddItem, emptyState, onRefresh, }: TableProps): import("react/jsx-runtime").JSX.Element;
+/** 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;