pixelize-design-library 2.4.2-beta.36 → 2.4.2-beta.38

package/dist/Components/Form/FormWrapper.d.ts

@@ -1,7 +1,10 @@
 import React, { ElementType } from "react";
+/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
 declare const FormWrapper: ({ icon, text, children, }: {
+    /** Must be a component reference (e.g. FiUser), not a rendered element like <FiUser />. */
     icon?: ElementType;
     text?: string;
+    /** Only icon/text/children are accepted — no `...rest`, so className/style/data- and aria-attributes never reach the DOM. */
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FormWrapper;

package/dist/Components/Form/FormWrapper.js

@@ -3,8 +3,9 @@ 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");
+/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
 const FormWrapper = ({ icon, text, children, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, size: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "base", bg: colors.background[50], border: `0.075rem solid ${colors.boxborder[200]}`, boxShadow: `0 0.063rem 0.125rem 0 ${colors.boxShadow.primary}`, p: "1.5rem", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "base", bg: colors.background[50], border: `0.075rem solid ${colors.boxborder[200]}`, boxShadow: `0 0.063rem 0.125rem 0 ${colors.boxShadow.primary}`, p: "1.5rem", children: children })] }));
 };
 exports.default = FormWrapper;

package/dist/Components/Header/HeaderProps.d.ts

@@ -1,3 +1,4 @@
+/** Horizontal top bar with page-link nav + submenus — for a user-avatar dropdown bar instead, use NavigationBar. */
 type SubItem = {
     label: string;
     href: string;
@@ -15,8 +16,10 @@ type MenuItemProp = {
         colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
     };
     onClick?: () => void;
+    /** Opens as a hover-only dropdown on desktop (no click/keyboard trigger) — a click-toggled accordion on mobile instead. */
     children?: SubItem[];
 };
+/** Props for Header, the horizontal top bar; use NavigationBar for a user-avatar dropdown instead. */
 export type HeaderProps = {
     logo: React.ReactNode;
     menuItems: MenuItemProp[];
@@ -32,6 +35,7 @@ export type HeaderProps = {
     boxShadow?: string;
     onMobileMenuClose?: () => void;
 };
+/** Internal props for Header's desktop nav row; not meant for consumers. */
 export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     setHoveredMenu: (menu: string | null) => void;
     isActive: (href?: string) => boolean | "" | undefined;
@@ -41,6 +45,7 @@ export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     color: string;
     hoverTextColor?: string;
 };
+/** Internal props for Header's collapsible mobile menu panel; not meant for consumers. */
 export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
     isOpen: boolean;
     onClose?: () => void;

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

@@ -1,3 +1,4 @@
+/** Internal, not exported from index.ts — use TextInput for a public field. No id prop; the label always renders as a plain span, never linked to the input. */
 export type InputProps = {
     label: string;
     type?: "email" | "password" | "text" | "number";
@@ -7,6 +8,7 @@ export type InputProps = {
     placeholder?: string;
     className?: string;
     inputBoxClassName?: string;
+    /** disabled, autoComplete, autoFocus, inputClassName, labelClassName, errorClassName are typed here but Input.tsx never reads them — no effect. */
     inputClassName?: string;
     labelClassName?: string;
     errorClassName?: string;

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

@@ -1,3 +1,4 @@
 import { PhoneNumberInputProps } from "./PhoneNumberInputProps";
+/** Country-code-aware phone field with a flag/dial-code prefix; its `ref` prop never attaches — this is a plain function component, not `forwardRef`. */
 declare const PhoneNumberInput: ({ size, value, codeValueReturn, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default PhoneNumberInput;

package/dist/Components/Input/PhoneNumberInput.js

@@ -19,6 +19,7 @@ const getFlagEmoji = (countryCode) => {
 };
 const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
 const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
+/** Country-code-aware phone field with a flag/dial-code prefix; its `ref` prop never attaches — this is a plain function component, not `forwardRef`. */
 const PhoneNumberInput = ({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, ref, name, minW, maxW, ...rest }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const getCountryTelCode = (0, react_1.useCallback)((countryCode) => {

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

@@ -1,9 +1,11 @@
+/** One entry in the `countries` select; `dial_code` prefixes the number on change. */
 export type CountryOption = {
     country_id: string | number;
     code: string;
     country: string;
     dial_code: string;
 };
+/** The number field stays isDisabled until a country is chosen (via the select or the country prop) — with neither, typing silently does nothing. */
 export type PhoneNumberInputProps = {
     label?: string;
     id?: string;
@@ -26,6 +28,7 @@ export type PhoneNumberInputProps = {
     onBlur?: () => void;
     onFocus?: () => void;
     isReadOnly?: boolean;
+    /** Typed here but PhoneNumberInput is a plain function component, not forwardRef — passing ref never attaches; ref.current stays null. */
     ref?: React.Ref<HTMLInputElement>;
     autoComplete?: string;
     height?: string;

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

@@ -1,4 +1,5 @@
 import { SwitchProps } from "@chakra-ui/react";
+/** Extends SwitchProps, so a caller-supplied sx spreads in last and silently replaces the built-in checked/unchecked track color. */
 export interface ThemedSwitchProps extends SwitchProps {
     switchText?: string;
     switchTextPosition?: "left" | "right";
@@ -8,4 +9,5 @@ export interface ThemedSwitchProps extends SwitchProps {
     label?: string;
     size?: "sm" | "md" | "lg";
 }
+/** Themed Chakra `Switch` wrapper; a caller-supplied `sx` replaces (not merges with) the built-in checked/unchecked track color. */
 export declare const InputSwitch: ({ switchText, switchTextPosition, id, isChecked, label, isInformation, informationMessage, isRequired, size, ...props }: ThemedSwitchProps) => import("react/jsx-runtime").JSX.Element;

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/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/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

@@ -10,6 +10,7 @@ const lucide_react_1 = require("lucide-react");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 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 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));

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,6 +1,6 @@
 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 = {
     id: string;
     customNode?: () => ReactNode;
@@ -10,6 +10,7 @@ export type Account = {
     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;
@@ -28,9 +29,12 @@ 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 = {
     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;
         buttonText?: string;
@@ -38,7 +42,9 @@ export type KanbanBoardProps = {
     };
     onDelete?: (account: Account) => void;
     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;
@@ -56,11 +62,13 @@ export type KanbanBoardProps = {
         width?: string;
         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;
@@ -82,22 +90,15 @@ export type KanbanBoardProps = {
     };
     /** 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?: {
         baseurl: string;
         token: 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

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const react_3 = require("@emotion/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** 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) `

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

@@ -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 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;

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/MultiSelectProps.d.ts

@@ -1,3 +1,4 @@
+/** No `options` prop — typed text is validated as an email, not picked from a list; use `SearchSelect isMultiple`. */
 export type MultiSelectProps = {
     value: MultiSelctOPtions[];
     onValueChange: (options: MultiSelctOPtions[]) => void;
@@ -17,6 +18,7 @@ export type MultiSelectProps = {
     errorMessage?: string;
     helperText?: string;
 };
+/** One entered chip — id is a generated key, label is the email text the user typed. */
 export type MultiSelctOPtions = {
     id: string;
     label: string;

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
+/** Props for the top navbar — user menu, nav items, and the toggle/peek affordances shared with SideBar. */
 export type NavbarProps = {
+    /** Prop name is spelled exactly this way ("Avathar") — not a typo to correct at the call site. */
     userAvathar?: string;
     userName: string;
     userRole?: string;
@@ -27,6 +29,7 @@ export type NavbarProps = {
      */
     onSideBarPeek?: () => void;
 };
+/** One navMenu entry (id/title/url/icon) — unrelated to Chakra's own MenuProps despite the shared name. */
 export type MenuProps = {
     id?: string | number;
     title: string;

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -1,2 +1,3 @@
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
+/** Self-contained note composer (optional title + textarea + Save); its `ref` only ever reaches the title input, never the primary textarea. */
 export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -15,6 +15,7 @@ const countWords = (text = "") => {
         return 0;
     return t.split(/\s+/).length;
 };
+/** Self-contained note composer (optional title + textarea + Save); its `ref` only ever reaches the title input, never the primary textarea. */
 function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title, file, isEditable = false, saveButtonLoading, maxFileSize = 1 * 1024 * 1024, maxFilesSizeError = "Some files are too large. Maximum allowed size is", maxNoteWordCount = 15, onChange, ref: inputRef, customPlaceholder = "Add a note...", cancelButtonHide = false, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const noteAreaRef = (0, react_1.useRef)(null);

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -1,4 +1,5 @@
 import { LegacyRef } from "react";
+/** Plain Chakra Textarea + title + file attach, not a rich text editor — no formatting toolbar despite the "note" naming. Use Editor for HTML content. */
 export type NoteTextAreaProps = {
     width?: number | string;
     handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
@@ -7,6 +8,7 @@ export type NoteTextAreaProps = {
     file?: File[];
     isEditable?: boolean;
     handleCancel?: (isActive: boolean) => void;
+    /** Any transition to false while isEditable is not true clears the note, title and files — including after a failed save, not just success. */
     saveButtonLoading?: boolean;
     maxFileSize?: number;
     maxFilesSizeError?: string;

package/dist/Components/Notification/Notification.d.ts

@@ -1,3 +1,4 @@
 import { NotificationProps } from "./NotificationProps";
+/** Self-contained event/task card with its own loading skeleton — not the app's toast/alert system; for status messages use Toaster (overlays). */
 declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, colors, }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 export default Notification;

package/dist/Components/Notification/Notification.js

@@ -7,6 +7,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+/** Self-contained event/task card with its own loading skeleton — not the app's toast/alert system; for status messages use Toaster (overlays). */
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const theme = (0, useCustomTheme_1.useCustomTheme)();