pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.41

package/dist/Components/Table/variants/tokens.js

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

package/dist/Components/Tag/Tag.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { TagProps } from "./TagProps";
+/** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
 declare const Tag: React.FC<TagProps>;
 export default Tag;

package/dist/Components/Tag/Tag.js

@@ -9,6 +9,7 @@ const ICON_SIZE = {
     md: "1em",
     lg: "1.1em",
 };
+/** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
 const Tag = ({ label, colorScheme = "primary", variant = "solid", size = "md", icon, onTagClick, onIconClick, }) => {
     const isInteractive = !!onTagClick;
     return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", children: [isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { as: "button", type: "button", cursor: "pointer", onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: label })) : ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { children: label })), icon &&

package/dist/Components/Tag/Tag.styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 // Resolve a colorScheme key to a numeric swatch from the theme. All supported
 // colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
 // gray so an unknown/missing key can never throw at render time.
@@ -41,17 +42,22 @@ exports.Tag = {
     },
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
+            const palette = theme.colors;
             const c = swatch(theme, colorScheme);
-            const { white, black } = theme.colors;
-            const fill = c[500];
-            const hoverFill = c[600];
-            const activeFill = c[700];
+            const { white, black, backgroundColor } = palette;
+            const canvas = backgroundColor.main;
+            const fillRung = (0, filledSurface_1.solidFillRung)(c, white);
+            const hoverRung = (0, filledSurface_1.darkerFillRung)(c, canvas, white, 0);
+            const activeRung = (0, filledSurface_1.darkerFillRung)(c, canvas, white, 1);
+            const fill = c[fillRung];
+            const hoverFill = c[hoverRung];
+            const activeFill = c[activeRung];
             return {
                 container: {
                     bg: fill,
-                    color: (0, accentText_1.onFilled)(fill, white, black),
-                    _hover: { bg: hoverFill, color: (0, accentText_1.onFilled)(hoverFill, white, black) },
-                    _active: { bg: activeFill, color: (0, accentText_1.onFilled)(activeFill, white, black) },
+                    color: (0, filledSurface_1.labelOnFill)(fill, white, black),
+                    _hover: { bg: hoverFill, color: (0, filledSurface_1.labelOnFill)(hoverFill, white, black) },
+                    _active: { bg: activeFill, color: (0, filledSurface_1.labelOnFill)(activeFill, white, black) },
                 },
             };
         },
@@ -74,13 +80,12 @@ exports.Tag = {
         outline: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
             const canvas = theme.colors.backgroundColor.main;
+            const ink = (0, accentText_1.accentTextOnCanvas)(c, canvas);
             return {
                 container: {
                     border: "0.094rem solid",
-                    borderColor: c[500],
-                    // Text sits directly on the page canvas here — a fixed [600] failed AA for several
-                    // hues (orange 2.51, green 2.94, red 4.09); use the canvas-text helper instead.
-                    color: (0, accentText_1.accentTextOnCanvas)(c, canvas),
+                    borderColor: ink,
+                    color: ink,
                     bg: "transparent",
                     _hover: { bg: c[50] },
                     _active: { bg: c[100] },

package/dist/Components/Tag/TagProps.d.ts

@@ -1,11 +1,18 @@
 import { ElementType } from "react";
+/** Tag color; primary/secondary/tertiary are brand tokens, the rest are semantic/neutral colors. */
 export type TagColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+/** Tag size; also scales the optional icon via ICON_SIZE. Defaults to "md". */
 export type TagSize = "xs" | "sm" | "md" | "lg";
+/** Passed through to Chakra's Tag variant; defaults to "solid". */
 export type TagVariant = "solid" | "outline" | "subtle";
+/** Props for the pill-shaped status/filter Tag chip — see Tag.tsx for interactive/icon behavior. */
 export interface TagProps {
     label: string;
+    /** No effect without icon — turns it into a remove button and stops the click from bubbling to onTagClick. */
     onIconClick?: () => void;
+    /** Makes only the label a button, not the tag body — the icon (if present) is a separate click target. */
     onTagClick?: () => void;
+    /** Decorative (aria-hidden) unless onIconClick is also passed — icon alone adds no interactivity. */
     icon?: ElementType;
     colorScheme?: TagColorScheme;
     size?: TagSize;

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,3 +1,4 @@
 import { TimelineProps } from "./TimelineProps";
+/** Renders a grouped, alternating two-column desktop / single-rail mobile event feed with inline notes — not a generic list. */
 declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
 export default Timeline;

package/dist/Components/Timeline/Timeline.js

@@ -188,6 +188,7 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
                             setActiveNoteEventIndex(null);
                     }, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
 });
+/** Renders a grouped, alternating two-column desktop / single-rail mobile event feed with inline notes — not a generic list. */
 const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote = false, addNoteLoading, editNoteLoading, deletingNoteId, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const colors = theme.colors;

package/dist/Components/Timeline/TimelineProps.d.ts

@@ -1,8 +1,11 @@
+/** Config + event data for Timeline's grouped feed; onEventClick/onAddNote/onEditNote/onDeleteNote are all optional so the feed can be read-only. */
 export interface TimelineProps {
+    /** Dead prop — Timeline only ever reads timelineEvents; passing events silently renders nothing. */
     events?: TimelineEvent[];
     timelineEvents: TimelineEvents[];
     onEventClick?: (event: TimelineEvents, index: number) => void;
     onAddNote?: (note: string, title: string, files: File[], event: TimelineEvents, index: number) => void;
+    /** Unlike onAddNote, the edit editor only auto-closes via editNoteLoading flipping true→false — omit it and Save never closes the form. */
     onEditNote?: (logNoteId: number, note: string, title: string, files: File[], event: TimelineEvents, index: number) => void;
     onDeleteNote?: (logNoteId: number, event: TimelineEvents, index: number) => void;
     showAddNote?: boolean;
@@ -13,16 +16,19 @@ export interface TimelineProps {
     /** log_note_id currently being deleted — shows a spinner on that note. */
     deletingNoteId?: number | string | null;
 }
+/** Shape for the dead events prop only — the array Timeline actually renders is TimelineEvents (plural), below. */
 export interface TimelineEvent {
     title: string;
     description: string;
     time: string;
 }
+/** A file attached to a manual timeline note; size is captured but never read or displayed. */
 export interface TimelineNoteAttachment {
     url: string;
     name?: string;
     size?: number | null;
 }
+/** One manual note attached to a log entry; log_note_id doubles as the React key and the edit/delete target. */
 export interface TimelineNote {
     log_note_id: number;
     logs_id?: number;
@@ -32,6 +38,7 @@ export interface TimelineNote {
     created_at?: number | string | null;
     created_by?: string | null;
 }
+/** One timeline entry (despite the plural name) — the element type of the timelineEvents array Timeline actually renders. */
 export interface TimelineEvents {
     logs_id: number;
     title: string;
@@ -39,6 +46,7 @@ export interface TimelineEvents {
     is_from: string;
     action_from: string;
     action_by: string;
+    /** An unparseable value drops the whole event from every render path — no fallback bucket, no error. */
     created_at: number;
     changes: unknown;
     notes?: TimelineNote[] | null;

package/dist/Components/Toaster/Toaster.d.ts

@@ -1,3 +1,4 @@
 import { ToasterChildren, ToasterContextType } from "./ToasterProps";
+/** Provides useToaster().showToast() — a transient, self-dismissing notification, not hover-triggered info (ToolTip) or a blocking confirmation (AlertDialog). */
 export default function ToasterProvider({ children }: ToasterChildren): import("react/jsx-runtime").JSX.Element;
 export declare const useToaster: () => ToasterContextType;

package/dist/Components/Toaster/Toaster.js

@@ -64,6 +64,7 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
                     animationPlayState: paused ? "paused" : "running",
                 } }))] }));
 }
+/** Provides useToaster().showToast() — a transient, self-dismissing notification, not hover-triggered info (ToolTip) or a blocking confirmation (AlertDialog). */
 function ToasterProvider({ children }) {
     const toast = (0, react_2.useToast)();
     const theme = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/Toaster/ToasterProps.d.ts

@@ -1,5 +1,6 @@
 import { ToastProps } from "@chakra-ui/react";
 import { ReactNode } from "react";
+/** children is Picked from Chakra's ToastProps but never read by showToast — a dead prop; pass description instead. */
 export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isClosable' | 'duration' | 'children' | 'onClose'> & {
     position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
     status?: "success" | "error" | "warning" | "info" | "loading";
@@ -11,9 +12,11 @@ export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isCl
      */
     actions?: (onClose: () => void) => ReactNode;
 };
+/** Shape of the ToasterContext value; useToaster() throws if called outside a mounted ToasterProvider. */
 export interface ToasterContextType {
     showToast: (children: ToasterToastProps) => void;
 }
+/** Props for ToasterProvider — just the app subtree it wraps in the toast context. */
 export interface ToasterChildren {
     children: ReactNode;
 }

package/dist/Components/Toggle/TableToggle.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { ViewToggleProps } from "./TableToggleProps";
+/** Two icon-only IconButtons (Grid/List) with no aria-pressed — selection is shown by color only; shares variant with SegmentedControl (see MODULE.md). */
 declare const TableToggle: React.FC<ViewToggleProps>;
 export default TableToggle;

package/dist/Components/Toggle/TableToggle.js

@@ -4,41 +4,96 @@ 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 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 outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const TableToggle = ({ value, onChange }) => {
+const MODES = ["grid", "list"];
+/** Two icon-only IconButtons (Grid/List) with no aria-pressed — selection is shown by color only; shares variant with SegmentedControl (see MODULE.md). */
+const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors } = theme;
+    const isBrandSlide = variant === "brandSlide";
+    const isUnderlineSlide = variant === "underlineSlide";
+    const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const brandFill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const restInk = (0, outlineRung_1.liftToContrast)(colors.background[800], colors.background[600], outlineRung_1.AA_NON_TEXT);
+    const hoverInk = (0, outlineRung_1.liftToContrast)(colors.background[900], colors.background[400], outlineRung_1.AA_NON_TEXT);
+    const trackRef = (0, react_1.useRef)(null);
+    const refs = (0, react_1.useRef)([]);
+    const [pill, setPill] = (0, react_1.useState)(null);
+    const selectedIndex = MODES.indexOf(value);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!hasIndicator)
+            return;
+        const track = trackRef.current;
+        const node = refs.current[selectedIndex];
+        if (!track || !node) {
+            setPill(null);
+            return;
+        }
+        const trackRect = track.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
+    }, [hasIndicator, selectedIndex]);
     const styles = {
         container: {
             display: "flex",
             alignItems: "center",
-            bg: theme.colors.background[600],
-            p: "0.125rem",
-            borderRadius: "md",
+            bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600],
+            p: isUnderlineSlide ? "0" : "0.125rem",
+            borderRadius: isUnderlineSlide ? "none" : "md",
+            borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined,
             height: "2rem",
-            gap: "0.125rem",
+            gap: isUnderlineSlide ? "0" : "0.125rem",
             width: "6.3rem",
+            position: "relative",
         },
         button: (mode) => ({
-            bg: value === mode ? theme.colors.background[50] : "transparent",
-            boxShadow: value === mode ? "md" : "none",
-            color: value === mode ? theme.colors.text[900] : theme.colors.background[800],
-            borderRadius: "base",
+            position: "relative",
+            zIndex: 1,
+            bg: hasIndicator ? "transparent" : value === mode ? colors.backgroundColor.light : "transparent",
+            boxShadow: hasIndicator ? "none" : value === mode ? "md" : "none",
+            color: isBrandSlide
+                ? value === mode
+                    ? brandFill.color
+                    : restInk
+                : value === mode
+                    ? colors.accentText
+                    : restInk,
+            borderRadius: isUnderlineSlide ? "none" : "base",
             height: "1.75rem",
-            border: "0.031rem solid",
-            borderColor: value === mode ? theme.colors.background[400] : "transparent",
+            border: hasIndicator ? "none" : "0.031rem solid",
+            borderColor: hasIndicator
+                ? "transparent"
+                : value === mode
+                    ? colors.primary.opacity[32]
+                    : "transparent",
             padding: "0.313rem 0.813rem",
             _hover: {
-                bg: value === mode
-                    ? theme.colors.background[50]
-                    : theme.colors.background[400],
-                color: value === mode ? theme.colors.text[900] : theme.colors.background[900],
+                bg: hasIndicator
+                    ? "transparent"
+                    : value === mode
+                        ? colors.backgroundColor.light
+                        : colors.background[400],
+                color: isBrandSlide
+                    ? value === mode
+                        ? brandFill.color
+                        : hoverInk
+                    : value === mode
+                        ? colors.accentText
+                        : hoverInk,
             },
-            transition: "all 0.3s ease-in-out",
+            transition: "color 0.2s ease-in-out",
         }),
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ...styles.container, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Grid View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "List View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: "1.75rem", w: `${pill.width}px`, borderRadius: "base", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { ref: (node) => {
+                        refs.current[0] = node;
+                    }, "aria-label": "Grid View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { ref: (node) => {
+                        refs.current[1] = node;
+                    }, "aria-label": "List View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
 };
 exports.default = TableToggle;

package/dist/Components/Toggle/TableToggleProps.d.ts

@@ -1,5 +1,11 @@
+/** The two views TableToggle switches between — "list" renders as a kanban-style icon, not a literal list. */
 export type ViewMode = "grid" | "list";
+/** Visual style for TableToggle; "default" is the plain segmented control with no sliding indicator. */
+export type TableToggleVariant = "default" | "brandSlide" | "underlineSlide";
+/** Props for TableToggle — the exported type is named ViewToggleProps, not TableToggleProps. */
 export type ViewToggleProps = {
     value: ViewMode;
     onChange: (val: ViewMode) => void;
+    /** brandSlide = primary view switcher; underlineSlide = dense toolbars/headers. */
+    variant?: TableToggleVariant;
 };

package/dist/Components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,3 @@
+import { ToggleSwitchProps } from "./ToggleSwitchProps";
+/** Binary on/off control, role="switch"; always controlled with no internal state — distinct from the two-option Switch/SegmentedControl. */
+export default function ToggleSwitch({ isChecked, onChange, isDisabled, size, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ToggleSwitch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const SIZES = {
+    sm: { w: "2rem", h: "1.125rem", knob: "0.875rem", travel: "0.75rem" },
+    md: { w: "2.375rem", h: "1.375rem", knob: "1.125rem", travel: "0.875rem" },
+};
+/** Binary on/off control, role="switch"; always controlled with no internal state — distinct from the two-option Switch/SegmentedControl. */
+function ToggleSwitch({ isChecked, onChange, isDisabled = false, size = "md", id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const dims = SIZES[size];
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", id: id, role: "switch", "aria-checked": isChecked, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, disabled: isDisabled, onClick: () => onChange(!isChecked), position: "relative", display: "inline-flex", alignItems: "center", flexShrink: 0, w: dims.w, h: dims.h, p: 0, borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: isChecked ? colors.primary[500] : colors.boxborder[500], bg: isChecked ? colors.primary[500] : colors.background[600], opacity: isDisabled ? 0.5 : 1, cursor: isDisabled ? "not-allowed" : "pointer", transition: "background-color 0.2s ease, border-color 0.2s ease", _focusVisible: {
+            outline: "none",
+            boxShadow: `0 0 0 2px ${colors.primary[300]}`,
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: colors.white, boxShadow: "sm", transition: "transform 0.2s ease", transform: isChecked ? `translateX(${dims.travel})` : "translateX(0)" }) }));
+}

package/dist/Components/ToggleSwitch/ToggleSwitchProps.d.ts

@@ -0,0 +1,13 @@
+/** Track/knob size preset for ToggleSwitch; exact widths and travel distance live in ToggleSwitch.tsx's SIZES map. */
+export type ToggleSwitchSize = "sm" | "md";
+/** Props for the switch — isChecked/onChange are required, so there's no uncontrolled/defaultChecked mode. */
+export type ToggleSwitchProps = {
+    isChecked: boolean;
+    onChange: (checked: boolean) => void;
+    isDisabled?: boolean;
+    size?: ToggleSwitchSize;
+    id?: string;
+    /** The control carries no visible text, so it has no other way to be named. */
+    "aria-label": string;
+    "aria-describedby"?: string;
+};

package/dist/Components/ToggleSwitch/ToggleSwitchProps.js

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

package/dist/Components/ToolTip/ToolTip.d.ts

@@ -1,2 +1,3 @@
 import { ToolTipProps } from "./ToolTipProps";
+/** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
 export default function ToolTip({ placement, label, children, hasArrow, fontSize, bg, color, isDisabled, overflowOnly, isOpen, defaultIsOpen, openDelay, closeDelay, arrowSize, closeOnClick, size, width, height, arrowPadding, arrowShadowColor, direction, gutter, onClose, modifiers, closeOnPointerDown, styles, }: ToolTipProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToolTip/ToolTip.js

@@ -7,18 +7,19 @@ const react_2 = require("@chakra-ui/react");
 const useIsTruncated_1 = require("../../Hooks/useIsTruncated");
 const mergeRefs_1 = require("../../Utils/mergeRefs");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color = "white", isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
+function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color, isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
     // Measure the child for `overflowOnly`. The hook is always called (Rules of
     // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,
     // no ResizeObserver, no re-renders for ordinary tooltips. Measurement never
     // runs on hover/scroll, so showing the tooltip stays as cheap as before.
     const { ref, isTruncated } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
-    // A tooltip is an INVERTED surface: near-black under a light canvas, carrying a white
-    // label. `sidebar.background` is the only ramp `buildDarkPalette` deliberately leaves
-    // un-inverted, so it stays near-black in dark mode and the white label stays legible —
-    // every other surface ramp flips light and would render the label invisible.
+    // `sidebar.background` stays near-black in both modes; ink is computed via `onFilled`.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const surface = theme.colors.sidebar.background[500];
+    const resolvedBg = bg !== null && bg !== void 0 ? bg : surface;
+    const resolvedColor = color !== null && color !== void 0 ? color : (0, accentText_1.onFilled)(resolvedBg, theme.colors.white, theme.colors.black);
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && (0, react_1.isValidElement)(children)) {
@@ -29,5 +30,5 @@ function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize
         });
         effectiveDisabled = Boolean(isDisabled) || !isTruncated;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg !== null && bg !== void 0 ? bg : surface, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: resolvedBg, color: resolvedColor, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
 }

package/dist/Components/ToolTip/ToolTipProps.d.ts

@@ -1,5 +1,9 @@
 import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
-export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "bg" | "color" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+/** Closed prop list, no ...rest — shouldWrapChildren/portalProps aren't exposed; hasArrow defaults true, closeOnClick false (both flipped from Chakra). */
+export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+    /** bg/color default to the theme's inverted sidebar surface (near-black both modes) — override only if you own the contrast. */
+    bg?: string;
+    color?: string;
     children: React.ReactNode;
     styles?: React.CSSProperties;
     /**

package/dist/Components/Trail/EditableCell.d.ts

@@ -5,7 +5,9 @@ interface EditableCellProps {
     column: Column;
     isEditable: boolean;
     handleCellClick: (rowId: number, columnId: number) => void;
+    /** Also fires on outside-click with the cell's current unchanged value — a commit signal, not only a real edit. */
     handleCellChange: (rowId: number, columnLabel: string, value: string) => void;
 }
+/** Inline editable cell driven entirely by parent-owned row state — no internal draft state of its own. */
 export declare const EditableCell: React.FC<EditableCellProps>;
 export {};

package/dist/Components/Trail/EditableCell.js

@@ -7,6 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/** Inline editable cell driven entirely by parent-owned row state — no internal draft state of its own. */
 const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const cellRef = (0, react_1.useRef)(null);
@@ -23,7 +24,7 @@ const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChan
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "50%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
         }
         else if (column.label === "priority") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: colors.teal[100] }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: colors.teal[100] }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: colors.teal[100] }, children: "High" })] })] }) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), children: "High" })] })] }) }));
         }
         else {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));

package/dist/Components/Trail/SelectAllCheckbox.d.ts

@@ -4,5 +4,6 @@ interface SelectAllCheckboxProps {
     isIndeterminate: boolean;
     handleSelectAll: () => void;
 }
+/** Purely presentational — isAllSelected/isIndeterminate must be computed and owned entirely by the parent. */
 export declare const SelectAllCheckbox: React.FC<SelectAllCheckboxProps>;
 export {};

package/dist/Components/Trail/SelectAllCheckbox.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectAllCheckbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+/** Purely presentational — isAllSelected/isIndeterminate must be computed and owned entirely by the parent. */
 const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
 };

package/dist/Components/Trail/TrailWorks.d.ts

@@ -1,2 +1,3 @@
+/** Hardcoded 2-row demo table with no props at all — not a reusable grid; use Table for a real editable/selectable list. */
 declare const TrailWorks: () => import("react/jsx-runtime").JSX.Element;
 export default TrailWorks;

package/dist/Components/Trail/TrailWorks.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Hardcoded 2-row demo table with no props at all — not a reusable grid; use Table for a real editable/selectable list. */
 const TrailWorks = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const cellBorder = colors.border[500];
+    const cellBorder = colors.boxborder[200];
     const data = [
         {
             contact: "John Doe",

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts

@@ -1,10 +1,12 @@
 import { ElementType } from "react";
+/** Size preset for UpgradeButton; "sm" is a dense variant of the same badge, not simply a smaller one. */
 export type UpgradeButtonSize = "sm" | "md" | "lg";
 /**
  * Theme-aware color variants. Each resolves to a gradient built from the
  * active theme's tokens, so the button blends with whichever theme is active.
  */
 export type UpgradeButtonVariant = "brand" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+/** Prominent animated shimmer CTA button for "upgrade now" actions — not the compact plan-state pill; see PlanPill/PlanBadge for that. Reused as LimitReachedModal's own CTA. */
 export interface UpgradeButtonProps {
     /** Primary label (shown on md+ screens). */
     label: string;
@@ -14,7 +16,7 @@ export interface UpgradeButtonProps {
     subtitle?: string;
     /** Leading icon. Defaults to lucide `Sparkles`. Pass null to hide. */
     icon?: ElementType | null;
-    /** Icon color. Defaults to a gold tone. */
+    /** Defaults to gold only when gold clears AA contrast against the gradient; otherwise silently falls back to the label's ink color. */
     iconColor?: string;
     /**
      * Theme-aware color variant. Defaults to `brand` (the active theme's
@@ -29,11 +31,13 @@ export interface UpgradeButtonProps {
         from: string;
         to: string;
     };
+    /** Default "md". */
     size?: UpgradeButtonSize;
     /** Animated light sweep on hover. Default true. */
     shimmer?: boolean;
-    /** Show a spinner and block interaction. */
+    /** Blocks onClick and shows a spinner, but does NOT set the native disabled attribute or dim opacity — pair with isDisabled for that. */
     isLoading?: boolean;
+    /** Unlike isLoading, this also dims opacity and sets the native disabled attribute. */
     isDisabled?: boolean;
     /** Truncate the label beyond this width. */
     maxLabelWidth?: string;

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -14,6 +14,6 @@ const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfir
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
     const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.gray[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.background[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
 };
 exports.default = DeactivateConfirmModal;

package/dist/Components/UserDetails/UserDetails.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { UserDetailsProps } from "./UserDetailsProps";
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals. */
 declare const UserDetails: React.FC<UserDetailsProps>;
 export default UserDetails;