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

package/dist/Components/Input/Switch/InputSwitch.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const FormLabel_1 = require("../../Common/FormLabel");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+/** Themed Chakra `Switch` wrapper; a caller-supplied `sx` replaces (not merges with) the built-in checked/unchecked track color. */
 const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, label, isInformation, informationMessage, isRequired, size = "md", ...props }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Read the palette directly — it is already swapped for the active mode, so pairing the rungs

package/dist/Components/Input/TextInput.js

@@ -44,6 +44,7 @@ const FormLabel_1 = require("../Common/FormLabel");
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Standard labelled text field — error/helper text, left/right icons; `isRequired` only draws the label asterisk, it isn't native HTML validation. */
 const TextInput = (0, react_1.forwardRef)(({ label, type = "text", id, name, onChange, onBlur, onFocus, isDisabled = false, isReadOnly = false, isRequired = false, value, placeholder = "Placeholder", width = "100%", height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size = "md", isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, ...props }, ref) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const sizeKey = typeof size === "string" ? size : "md";

package/dist/Components/Input/TextInput.styles.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
-const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
-const surfaceRungs_1 = require("../../Theme/tokens/builders/surfaceRungs");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 exports.Input = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         field: {
             fontWeight: 500,
             fontSize: "0.875rem",
@@ -15,11 +14,12 @@ exports.Input = {
             alignItems: "center",
             borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
+            // Every variant inherits the hint ink; only `outline` used to set it.
             _placeholder: {
-                fontStyle: "italic",
+                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
             },
         },
-    },
+    }),
     sizes: {
         sm: {
             field: {
@@ -50,13 +50,11 @@ exports.Input = {
             const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: theme.colors.gray[50],
+                    bg: theme.colors.background[50],
                     border: "0.063rem solid",
                     borderColor,
-                    // `textMuted` is body copy, so a hint read as a filled value (6.59:1).
-                    // Settled against the field's own bg to just clear of AA.
                     _placeholder: {
-                        color: (0, outlineRung_1.softenToContrast)(theme.colors.placeholder[500], theme.colors.gray[50], surfaceRungs_1.PLACEHOLDER_TEXT),
+                        color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                     },
                     _hover: {
                         borderColor: primary,
@@ -86,7 +84,7 @@ exports.Input = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: theme.colors.gray[100],
+                        bg: theme.colors.background[100],
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {

package/dist/Components/Input/TextInputProps.d.ts

@@ -1,7 +1,9 @@
 import { InputProps } from "@chakra-ui/react";
 import type { ReactNode } from "react";
+/** The library's primary single-line text field; type="password" has no built-in show/hide toggle — compose one via inputRightIcon + onRightIconclick. */
 export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave"> & {
     label?: string;
+    /** Omit id and the label renders as a plain span, unlabelled — same as InputTextArea. isRequired only draws an asterisk, never sets required/aria-required. */
     id?: string;
     name?: string;
     error?: boolean;

package/dist/Components/InputTextArea/InputTextArea.d.ts

@@ -1,3 +1,4 @@
+/** Labelled multi-line text field; `width` defaults to a literal `500` (px, not responsive) and there's no `...rest` escape hatch. */
 declare const InputTextArea: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").TextareaProps, "placeholder" | "resize" | "id" | "onBlur" | "onChange" | "variant" | "size" | "isDisabled" | "name" | "value" | "isReadOnly" | "isRequired" | "autoComplete"> & {
     label?: string;
     error?: boolean;

package/dist/Components/InputTextArea/InputTextArea.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
+/** Labelled multi-line text field; `width` defaults to a literal `500` (px, not responsive) and there's no `...rest` escape hatch. */
 const InputTextArea = (0, react_1.forwardRef)(function InputTextArea({ label, placeholder, value, onChange, onBlur, name, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }, ref) {
     return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: ref, id: id, name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 });

package/dist/Components/InputTextArea/InputTextArea.style.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = void 0;
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 exports.Textarea = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         fontWeight: 500,
         fontSize: "0.875rem",
         letterSpacing: "0.044rem",
@@ -11,9 +12,9 @@ exports.Textarea = {
         borderRadius: "lg",
         transition: "border-color 0.2s, box-shadow 0.2s",
         _placeholder: {
-            fontStyle: "italic",
+            color: (0, placeholderInk_1.placeholderInk)(theme.colors),
         },
-    },
+    }),
     sizes: {
         md: {
             fontSize: "0.875rem",
@@ -31,9 +32,9 @@ exports.Textarea = {
             return {
                 border: "0.063rem solid",
                 borderColor,
-                bg: theme.colors.gray[50],
+                bg: theme.colors.background[50],
                 _placeholder: {
-                    color: theme.colors.textMuted,
+                    color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                 },
                 _hover: {
                     borderColor: primary,
@@ -61,7 +62,7 @@ exports.Textarea = {
                     boxShadow: 'inherit',
                 },
                 _disabled: {
-                    bg: theme.colors.gray[100],
+                    bg: theme.colors.background[100],
                     opacity: 1,
                     cursor: "not-allowed",
                     _hover: {

package/dist/Components/InputTextArea/InputTextAreaProps.d.ts

@@ -1,4 +1,5 @@
 import { TextareaProps } from "@chakra-ui/react";
+/** width defaults to 500 → literal "500px", not responsive (pass "100%"); id is required or the label has no accessible association. */
 export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "onBlur" | "name" | "id" | "size" | "resize" | "isDisabled" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
     label?: string;
     error?: boolean;

package/dist/Components/KanbanBoard/AccountCard.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
 import { Account, KanbanBoardProps } from "./KanbanBoardProps";
+/** Renders one card; if `account.customNode` is set it fully replaces this (and the built-in delete/open/expand) — not exported from the package. */
 declare const AccountCard: React.MemoExoticComponent<({ account, onDelete, onOpen, isExpanded, onToggleExpand, isDeletable, }: {
     account: Account;
+    /** Accepted but never read inside the component — has no effect on rendering, keys, or ordering. */
     index?: number;
     onDelete: KanbanBoardProps["onDelete"];
     onOpen: KanbanBoardProps["onOpen"];
+    /** When false, shows only the first 4 string fields; `details` never renders until this is true. */
     isExpanded?: boolean;
     onToggleExpand?: () => void;
     isDeletable?: boolean;

package/dist/Components/KanbanBoard/AccountCard.js

@@ -45,6 +45,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const AccountRow_1 = __importDefault(require("./AccountRow"));
 const excludeKeys = ["id", "details"];
+/** Renders one card; if `account.customNode` is set it fully replaces this (and the built-in delete/open/expand) — not exported from the package. */
 const AccountCard = react_1.default.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";

package/dist/Components/KanbanBoard/AccountRow.d.ts

@@ -1,3 +1,4 @@
+/** Renders one label:value row; `label` is re-run through `toWords`, which only splits snake_case — a camelCase key like `nextFollowUp` displays as `Nextfollowup`. */
 declare const AccountRow: ({ label, value }: {
     label: string;
     value: string;

package/dist/Components/KanbanBoard/AccountRow.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const functions_1 = require("../../Utils/functions");
+/** Renders one label:value row; `label` is re-run through `toWords`, which only splits snake_case — a camelCase key like `nextFollowUp` displays as `Nextfollowup`. */
 const AccountRow = ({ label, value }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: (0, functions_1.toWords)(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), (0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.d.ts

@@ -1,7 +1,9 @@
 import { OptionProp } from "../../Select/SelectProps";
+/** Standalone filter+Edit+Create action bar; NOT rendered by KanbanBoard (which uses HeaderActions instead) and not exported from the package. */
 declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate, }: {
     options: OptionProp[];
     onSelectChange?: (option?: OptionProp) => void;
+    /** Unlike `HeaderActions`, there is no `isEditable`/`isCreatable` gate — both buttons always render. */
     onEdit?: () => void;
     onCreate?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -9,10 +9,10 @@ const Select_1 = __importDefault(require("../../Select/Select"));
 const lucide_react_1 = require("lucide-react");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const Button_1 = __importDefault(require("../../Button/Button"));
+/** Standalone filter+Edit+Create action bar; NOT rendered by KanbanBoard (which uses HeaderActions instead) and not exported from the package. */
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20, color: (0, accentText_1.onFilled)(colors.primary[500], colors.white, colors.black) }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 exports.default = KanbanActions;

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -1,3 +1,4 @@
 import { KanbanBoardProps } from "./KanbanBoardProps";
+/** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
 declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, }: KanbanBoardProps) => import("react/jsx-runtime").JSX.Element | null;
 export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -75,6 +75,7 @@ function reorderColumnEntries(entries, startIndex, endIndex) {
     result.splice(endIndex, 0, removed);
     return result;
 }
+/** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
 const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
     baseurl: "",
     token: "",

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -1,23 +1,29 @@
 import type { ReactNode } from "react";
 import { OptionProp } from "../Select/SelectProps";
-/** Index allows extra scalar fields; known string fields are explicit so they do not widen to `() => ReactNode`. */
+/** Extra string keys render as label:value rows on the card; number values (also allowed here) are silently never shown. */
 export type Account = {
+    /** Used as the React key and the dnd draggableId — must be unique and stable across renders. */
     id: string;
+    /** Fully replaces AccountCard for this card — onDelete/onOpen/isDeletable and expand/collapse never apply when set. */
     customNode?: () => ReactNode;
+    /** Excluded from the generic row list; shown as separate description text, only when expanded. */
     details?: string;
+    /** No special rendering — just another label:value row like any extra string key. */
     name?: string;
+    /** Same generic row treatment as `name` — not validated or used for an avatar. */
     email?: string;
+    /** Same generic row treatment as `name`/`email` — plain string, not a number. */
     rating?: string;
     [key: string]: string | number | null | undefined | (() => ReactNode);
 };
+/** One Kanban column: id, title, accent color, and its `Account` items. */
 export type ColumnType = {
     id: string;
     title: string;
+    /** Falls back to `colors.primary[500]` when omitted — used for the accent dot/border. */
     color: string;
     items: Account[];
-    /**
-     * Column-level slot (e.g. totals). Shown below the title when expanded, and in the collapsed narrow rail (rotated).
-     */
+    /** Column-level slot (e.g. totals); shown below the title expanded, and rotated in the collapsed rail. */
     customNode?: () => ReactNode;
 };
 /** Fired after a column rail is collapsed or expanded via the board UI. */
@@ -28,17 +34,27 @@ export type ColumnCollapseChangePayload = {
     /** Full collapsed map for all columns (same shape as `collapsedColumns` initial prop). */
     collapsedColumns: Record<string, boolean>;
 };
+/** Props for KanbanBoard — keyed columns (`data`) of draggable `Account` cards. */
 export type KanbanBoardProps = {
+    /** Base columns; `customColumns` below is merged on top, not into, this. */
     data: Record<string, ColumnType>;
+    /** Merged on top of `data` — a matching column id in both silently overwrites the `data` entry, not merges its fields. */
     customColumns?: Record<string, ColumnType>;
+    /** `isVisible` renders an inline dashed column when others exist, or a centered empty-state overlay when there are none. */
     customizeColumn?: {
         isVisible?: boolean;
+        /** Defaults to "Add column". */
         buttonText?: string;
+        /** Fires from both the inline dashed column and the empty-board overlay variant. */
         onAddColumn?: () => void;
     };
+    /** Never fires for a `customNode` card — it owns its own delete UI, and is not gated by `permissions.isDeletable`. */
     onDelete?: (account: Account) => void;
+    /** Same `customNode` exemption as `onDelete`; unlike delete, `onOpen` has no permission gate at all. */
     onOpen?: (account: Account) => void;
+    /** Receives the deleted column's item ids, not the column's own id — the column identity itself is not passed. */
     onColumnDelete?: (colId: (string | number)[]) => void;
+    /** Fires after `columns` state already updated internally — a notification, not a gate; it cannot veto or revert the move. */
     onDrag?: ({ from, to, item, columns, fromIndex, toIndex, }: {
         from: string;
         to: string;
@@ -47,58 +63,67 @@ export type KanbanBoardProps = {
         fromIndex: number;
         toIndex: number;
     }) => void;
+    /** Also true (skeletons show) whenever `preferences.baseurl` is set and its own fetch is still loading. */
     isLoading?: boolean;
     kanbanSelect?: {
+        /** Gates the whole select — unlike `kanbanEdit`/`kanbanCreate`, never checked against `permissions`. */
         isSelect?: boolean;
         options?: OptionProp[];
         onSelectChange?: (option?: OptionProp) => void;
         selectPlaceholderText?: string;
+        /** Defaults to `"12.5rem"` when omitted. */
         width?: string;
+        /** Controlled value passed straight to the underlying Select. */
         value?: string;
     };
+    /** Button shows only when this `isEditable` AND `permissions.isEditable` (default true) both allow it. */
     kanbanEdit?: {
         isEditable?: boolean;
         onEdit?: () => void;
         label?: string;
     };
+    /** Same `permissions.isCreatable` AND-gate as `kanbanEdit`. */
     kanbanCreate?: {
         isCreatable?: boolean;
         onCreate?: () => void;
         label?: string;
     };
+    /** true renders cards via a virtualized react-window list; otherwise all cards mount directly. */
     virtualization?: boolean;
     permissions?: {
+        /** Also gates the `kanbanEdit` button and card drag; column-reorder drag ignores this. */
         isEditable?: boolean;
+        /** Also gates the `kanbanCreate` button. */
         isCreatable?: boolean;
+        /** Also hides the column-delete trash icon on column-header hover, not just per-card delete. */
         isDeletable?: boolean;
+        /** false returns null for the whole board — nothing renders, not even header actions. */
         isViewable?: boolean;
     };
     noItems?: {
+        /** Also requires the column to have zero items — evaluated per column, not board-wide. */
         isVisible?: boolean;
+        /** Defaults to "No items in this column". */
         text?: string;
+        /** Defaults to "Add Item"; hidden entirely when `isEmptyTextOnly` is true. */
         buttonText?: string;
         onClick?: (column: ColumnType) => void;
+        /** When true, the button never renders — only the text line shows. */
         isEmptyTextOnly?: boolean;
     };
     /** When true, columns can collapse to a narrow horizontal rail (full height). */
     enableColumnCollapse?: boolean;
-    /**
-     * Initial collapsed state keyed by column id (`data` / `customColumns` object keys).
-     * Merged on mount; when `preferences.url` is set, server `json.collapsedColumns` overrides these keys after load.
-     */
+    /** Seeds collapsed state once on mount only — later prop changes are ignored unless `preferences.baseurl` is set to sync from saved prefs. */
     collapsedColumns?: Record<string, boolean>;
     /** Called when the user collapses or expands a column (after internal state updates). */
     onColumnCollapseChange?: (payload: ColumnCollapseChangePayload) => void;
-    /** When true, columns can be reordered via the header grip handle. */
+    /** Column drag ignores `permissions.isEditable` — reordering stays possible even when item drag is permission-locked. */
     enableColumnReorder?: boolean;
     /** Called after column order changes (same shape as `data` keys order). */
     onColumnReorder?: (columns: Record<string, ColumnType>) => void;
-    /**
-     * Optional user-preferences API (same shape as `Table` `preferences`).
-     * When `url` is set, column collapse state is loaded from and saved to `json.collapsedColumns`
-     * (record of column id → collapsed).
-     */
+    /** Same shape as Table's `preferences`; collapse state loads/saves to `json.collapsedColumns` only when `baseurl` is set. */
     preferences?: {
+        /** Must be non-empty to activate preferences loading/saving at all. */
         baseurl: string;
         token: string;
         key?: string;

package/dist/Components/KanbanBoard/MeasuredItem.d.ts

@@ -4,5 +4,6 @@ type MeasuredItemProps = {
     setSize: (index: number, size: number) => void;
     children: React.ReactNode;
 };
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 declare const MeasuredItem: React.FC<MeasuredItemProps>;
 export default MeasuredItem;

package/dist/Components/KanbanBoard/MeasuredItem.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 const MeasuredItem = ({ index, setSize, children, }) => {
     const ref = (0, react_1.useRef)(null);
     const prevHeight = (0, react_1.useRef)(null);

package/dist/Components/LazyWrapper/LazyWrapper.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 export interface LazyWrapperProps {
     children: React.ReactNode;
-    /** Custom fallback node. Overrides the default spinner. */
+    /** Overrides the default spinner entirely — `minHeight` below then has no effect. */
     fallback?: React.ReactNode;
-    /** Min height of the default fallback container. */
+    /** Sizes only the built-in spinner — ignored once a custom `fallback` is passed. */
     minHeight?: string;
 }
+/** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
 declare const LazyWrapper: React.FC<LazyWrapperProps>;
 export default LazyWrapper;

package/dist/Components/LazyWrapper/LazyWrapper.js

@@ -8,5 +8,6 @@ const DefaultFallback = ({ minHeight }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: theme.colors.gray[100], color: theme.colors.accentText }) }));
 };
+/** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
 const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : (0, jsx_runtime_1.jsx)(DefaultFallback, { minHeight: minHeight }), children: children }));
 exports.default = LazyWrapper;

package/dist/Components/LimitReachedModal/LimitReachedModalProps.d.ts

@@ -1,13 +1,16 @@
+/** Which plan limit was hit; selects the modal's icon and copy via `resolveLimitCopy`. */
 export type LimitKind = "record" | "automation" | "custom_modules" | "user" | "projects" | "tickets";
+/** Fully controlled (isOpen/onClose only, no internal useDisclosure/autoOpen); closed prop list — modal size is fixed at "lg", not configurable. */
 export interface LimitReachedModalProps {
     isOpen: boolean;
     onClose: () => void;
     kind: LimitKind;
-    /** Plan limit for `kind`. Pass with `used` to show an inline usage line. */
+    /** Inline usage line needs BOTH limit and used — either alone silently renders nothing. */
     limit?: number | null;
     used?: number | null;
     /** false hides the upgrade CTA and swaps in "contact your administrator" copy. */
     canManageBilling: boolean;
+    /** Clicking the CTA calls only this — it does not also call onClose. Close the modal yourself if upgrading should dismiss it. */
     onUpgrade?: () => void;
     title?: string;
     message?: string;

package/dist/Components/LimitReachedModal/limitReachedCopy.d.ts

@@ -1,6 +1,8 @@
 import { LimitKind } from "./LimitReachedModalProps";
+/** title is the same for both audiences — only message swaps between admin and member copy. */
 export declare function resolveLimitCopy(kind: LimitKind, canManageBilling: boolean): {
     title: string;
     message: string;
 };
+/** Returns null unless BOTH used and limit are non-null — no partial "X used" line. */
 export declare function formatLimitUsage(kind: LimitKind, used?: number | null, limit?: number | null): string | null;

package/dist/Components/LimitReachedModal/limitReachedCopy.js

@@ -43,10 +43,12 @@ const COPY = {
         member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan.",
     },
 };
+/** title is the same for both audiences — only message swaps between admin and member copy. */
 function resolveLimitCopy(kind, canManageBilling) {
     const c = COPY[kind];
     return { title: c.title, message: canManageBilling ? c.admin : c.member };
 }
+/** Returns null unless BOTH used and limit are non-null — no partial "X used" line. */
 function formatLimitUsage(kind, used, limit) {
     if (used == null || limit == null)
         return null;

package/dist/Components/Loading/Loading.d.ts

@@ -1,2 +1,3 @@
 import { LoadingProps } from "./LoadingProps";
+/** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
 export default function Loading({ text, isLoading, onlytext, container }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/Loading/Loading.js

@@ -2,26 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Loading;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const react_2 = require("@emotion/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const react_3 = require("@emotion/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const colorTransition = (0, react_2.keyframes) `
-  0% {
-    color: black;
-  }
-  50% {
-    color: gray;
-  }
-  100% {
-    color: black;
-  }
-`;
+/** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
 function Loading({ text, isLoading, onlytext, container }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const colorTransition = (0, react_1.useMemo)(() => (0, react_3.keyframes) `
+      0% {
+        color: ${theme.colors.text[900]};
+      }
+      50% {
+        color: ${theme.colors.textMuted};
+      }
+      100% {
+        color: ${theme.colors.text[900]};
+      }
+    `, [theme.colors.text, theme.colors.textMuted]);
     if (!isLoading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: (0, jsx_runtime_1.jsx)(react_1.Center, { height: container ? "100%" : "100vh", children: !onlytext ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.accentText, size: "xl" }), (0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", children: text })] })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_2.css) `
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: (0, jsx_runtime_1.jsx)(react_2.Center, { height: container ? "100%" : "100vh", children: !onlytext ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.accentText, size: "xl" }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: "2", ml: "5", children: text })] })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_3.css) `
               animation: ${colorTransition} 2s infinite;
             `, children: text })) }) }));
 }

package/dist/Components/Loading/LoadingProps.d.ts

@@ -1,6 +1,8 @@
+/** Props for Loading, a full-viewport (or container-scoped) blocking overlay gated on `isLoading`. */
 export type LoadingProps = {
     text?: string;
     isLoading: boolean;
+    /** Swaps the spinner+label for a large pulsing 50px uppercase heading — a different treatment, not just "no spinner". */
     onlytext?: boolean;
     /** Scope the overlay to the nearest positioned ancestor with a MUI-style scrim, instead of full-viewport. */
     container?: boolean;

package/dist/Components/Modal/ModalProps.d.ts

@@ -1,10 +1,12 @@
 import { ModalProps } from "@chakra-ui/react";
+/** Props for our Modal wrapper — a curated subset of Chakra's ModalProps plus overlay/loading extras. */
 export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
     overlaybg?: string;
     overlaybackdropFilter?: string;
     overlaybackdropInvert?: string;
     overlaybackdropBlur?: string;
     size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full";
+    /** Only ModalHeader/ModalBody/ModalFooter render; other elements and fragment-wrapped slots are silently dropped. */
     children?: React.ReactNode;
     isLoading?: boolean;
 };

package/dist/Components/MoreItems/MoreItems.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { MoreItemsProps } from "./MoreItemsProps";
+/** "+N more" popover trigger for an overflowed list — renders nothing at all once the count reaches 0. */
 declare const MoreItems: React.FC<MoreItemsProps>;
 export default MoreItems;

package/dist/Components/MoreItems/MoreItems.js

@@ -3,12 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+/** "+N more" popover trigger for an overflowed list — renders nothing at all once the count reaches 0. */
 const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = false, columns = 2, minWidth = "260px", triggerMaxWidth = "250px", trigger = "hover", placement = "bottom-start", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const countBadgeBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).selected;
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: triggerText }) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: theme.colors.primary[100] }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: "all 0.15s ease", _hover: { bg: (0, rowStates_1.listRowBackgrounds)(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
                 // Chakra defaults this surface to `colors.gray.700` in dark, which against the
                 // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
                 bg: theme.colors.background[50], boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.background[50] }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {

package/dist/Components/MoreItems/MoreItemsProps.d.ts

@@ -1,18 +1,20 @@
 import { ReactNode } from "react";
+/** One row in the MoreItems popover grid — id, label and an optional dot color. */
 export interface MoreItem {
     id: string | number;
     label: string;
     /** Optional leading dot color. Falls back to colorResolver or a neutral gray. */
     color?: string;
 }
+/** Full trigger + popover configuration for MoreItems — see MoreItem for the shape of each listed row. */
 export interface MoreItemsProps {
     /** Items shown inside the popover. */
     items: MoreItem[];
-    /** Number rendered in the "+N more" trigger. Defaults to items.length. */
+    /** Defaults to items.length; ≤0 either way hides the trigger, falling back to bare triggerText or null. */
     moreCount?: number;
     /** Text shown before the "+N more" pill (e.g. the first visible value). */
     triggerText?: ReactNode;
-    /** Derive a dot color per item; takes precedence is given to item.color. */
+    /** Only runs when item.color is unset — item.color always wins over this resolver. */
     colorResolver?: (item: MoreItem) => string | undefined;
     /** Hide the colored leading dot entirely. */
     hideDots?: boolean;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -61,14 +61,14 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
                 // surface up to `muted` (lightest); [500] fails there, [800] clears all with margin.
                 borderColor: error || localError
                     ? theme.colors.semanticText.error
-                    : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.gray[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
+                    : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.background[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
                     borderColor: error || localError
                         ? theme.colors.semanticText.error
                         : theme.colors.primary[500],
                     boxShadow: `0 0 0 0.125rem ${error || localError
                         ? theme.colors.boxShadow.error
                         : theme.colors.boxShadow.primary}`,
-                }, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
+                }, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.text[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,
                         }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (error || localError) && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: localError || errorMessage })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));