pixelize-design-library 2.4.2-beta.37 → 2.4.2-beta.39

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

@@ -1,2 +1,3 @@
 import { SegmentedControlProps } from "./SegmentedControlProps";
+/** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
 export default function SegmentedControl<T extends string = string>({ options, value, onChange, size, isFullWidth, variant, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -10,6 +10,7 @@ const SIZES = {
     sm: { h: "1.625rem", px: "0.625rem", fontSize: "0.75rem" },
     md: { h: "2rem", px: "0.875rem", fontSize: "0.8125rem" },
 };
+/** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
 function SegmentedControl({ options, value, onChange, size = "md", isFullWidth = false, variant = "default", "aria-label": ariaLabel, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const dims = SIZES[size];

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

@@ -1,11 +1,15 @@
+/** Only two sizes; controls track height and font size — defaults to "md". */
 export type SegmentedControlSize = "sm" | "md";
+/** brandSlide = primary view switcher; underlineSlide = dense toolbar; default = plain buttons. */
 export type SegmentedControlVariant = "default" | "brandSlide" | "underlineSlide";
+/** One selectable segment; disabled options are skipped by keyboard nav (arrows/Home/End). */
 export type SegmentedControlOption<T extends string = string> = {
     value: T;
     label: string;
     icon?: JSX.Element;
     isDisabled?: boolean;
 };
+/** Props for SegmentedControl; T narrows options/value/onChange to the caller's literal union. */
 export type SegmentedControlProps<T extends string = string> = {
     /** Two to five mutually exclusive options. Beyond five, use a Select. */
     options: SegmentedControlOption<T>[];

package/dist/Components/Select/SelectProps.d.ts

@@ -1,4 +1,5 @@
 import { SelectProps } from "@chakra-ui/react";
+/** Props for `Select`; named lowercase to avoid clashing with Chakra's own imported `SelectProps`. */
 export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "colorScheme"> & {
     label?: string;
     id?: string;
@@ -17,6 +18,7 @@ export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "vari
     informationMessage?: string;
     selectStyle?: React.CSSProperties;
 };
+/** Single Select option: id/label pair used in `options` and passed back via `onChange`. */
 export type OptionProp = {
     id: string | number;
     label: string | number;

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,2 +1,3 @@
 import { SelectSearchProps } from "./SelectSearchProps";
+/** Search-as-you-type combobox with avatar/color/email rows — Enter only picks on an exact label match, not the highlighted option. */
 export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, isBottomIcon, errorMessage, BottomIcon, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }: Readonly<SelectSearchProps>): import("react/jsx-runtime").JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -45,6 +45,7 @@ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOp
     }
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
 };
+/** Search-as-you-type combobox with avatar/color/email rows — Enter only picks on an exact label match, not the highlighted option. */
 function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, 
 // BottomIconStyle,
 BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -1,6 +1,9 @@
+/** Props for the searchable combobox `SelectSearch`; supports multi-select chips and profile/color option rows. */
 export type SelectSearchProps = {
     options: selectOptions[];
+    /** Not implemented — never read by the component; the search input always renders regardless of this value. */
     isSearchEnabled?: boolean;
+    /** Seeds state once on mount (useState initializer) — changing it later does not update the selection; no sync effect. */
     initialSelectedOption?: selectOptions | null;
     onOptionSelect?: (option: selectOptions) => void;
     onOptionMultiSelect?: (option: selectOptions[]) => void;
@@ -28,9 +31,11 @@ export type SelectSearchProps = {
     BottomIcon?: boolean | undefined | JSX.Element;
     BottomIconStyle?: React.CSSProperties;
     BottomText?: string | number;
+    /** Despite the CSSProperties type, pass a plain color string (e.g. "red") — used directly as one, not spread as styles. */
     BottomTextColor?: React.CSSProperties;
     handleBottomClick?: () => void;
 };
+/** Option shape for SelectSearch; `email`/`profileUrl` back `isProfile` rows, `color` backs `isColorOptions` rows. */
 export type selectOptions = {
     id: string;
     label: string;

package/dist/Components/SelectV2/SelectV2.d.ts

@@ -1,2 +1,3 @@
 import { SelectV2Props } from "./SelectV2Props";
+/** Themed custom-popup select (fully React-rendered popup); not virtualized — for very large option lists, prefer SearchSelect. */
 export default function SelectV2(props: SelectV2Props): import("react/jsx-runtime").JSX.Element;

package/dist/Components/SelectV2/SelectV2.js

@@ -70,6 +70,7 @@ const OptionRow = react_1.default.memo(function OptionRow({ option, index, listb
                 ? backgrounds.active
                 : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
 });
+/** Themed custom-popup select (fully React-rendered popup); not virtualized — for very large option lists, prefer SearchSelect. */
 function SelectV2(props) {
     var _a, _b;
     const { options = [], placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isRequired = false, size = "md", isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;

package/dist/Components/SelectV2/SelectV2Props.d.ts

@@ -1,13 +1,15 @@
 import type { ReactNode } from "react";
+/** SelectV2 option shape; adds optional `icon`/`description`/`isDisabled` beyond the plain id/label pair. */
 export type OptionProp = {
     id: string | number;
     label: string | number;
     /** Optional leading icon/avatar for this option's row (and the trigger, when selected). */
     icon?: ReactNode;
-    /** Optional secondary line under the label (e.g. an email under a name). */
+    /** Optional secondary line under the label (e.g. an email under a name); not matched by the search filter. */
     description?: string;
     isDisabled?: boolean;
 };
+/** Trigger size keys; SelectV2's internal `SIZE_MAP` maps each to a height/fontSize/padding set. */
 export type SelectV2Size = "sm" | "md" | "lg";
 type SelectV2CommonProps = {
     options: OptionProp[];
@@ -50,11 +52,13 @@ type SelectV2CommonProps = {
      */
     defaultOpen?: boolean;
 };
+/** Single-select arm of `SelectV2Props`; `isMulti` false/absent discriminates it from the multi variant. */
 export type SelectV2SingleProps = SelectV2CommonProps & {
     isMulti?: false;
     value?: string | number;
     onChange: (selectedOption: OptionProp | undefined) => void;
 };
+/** Multi-select arm of `SelectV2Props`; `isMulti: true` discriminates it and makes `value` an array. */
 export type SelectV2MultiProps = SelectV2CommonProps & {
     isMulti: true;
     value?: (string | number)[];
@@ -62,5 +66,6 @@ export type SelectV2MultiProps = SelectV2CommonProps & {
     /** Show "N selected" once more than this many are chosen, instead of listing every label. Defaults to 2. */
     maxLabelsBeforeSummary?: number;
 };
+/** Props for `SelectV2`; a discriminated union on `isMulti` between the single and multi variants. */
 export type SelectV2Props = SelectV2SingleProps | SelectV2MultiProps;
 export {};

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType } from "react";
+/** Footer identity block (UserFooter); avatar falls back to initials derived from name when absent. */
 export type SidebarUser = {
     name: string;
     role?: string;
@@ -6,8 +7,10 @@ export type SidebarUser = {
     initials?: string;
     onClick?: () => void;
 };
+/** Docked/collapsible left rail with its own responsive overlay — not NavigationBar (top bar) or WorkspaceWindow (floating panel). */
 export type SidebarProps = {
     menus: MenuProps[];
+    /** Matched against each menu's `title` first, then `id` — a title that collides with another menu's `id` wins silently. */
     activeMenu: string | number;
     handleMenuClick?: (menu: MenuProps) => void;
     handleSecondaryNavClick?: (menu: MenuProps) => void;
@@ -23,6 +26,7 @@ export type SidebarProps = {
     selectedSecondaryItem?: string | number | null;
     isLoading?: boolean;
     loadingLines?: number;
+    /** Not a direct render switch — on change it calls `changeToggle()` once; nothing collapses unless that updates `toggle`. */
     open?: boolean;
     otherApps?: OtherAppsProps['otherApps'];
     /**
@@ -57,6 +61,7 @@ export type SidebarProps = {
     peekOpen?: boolean;
     onPeekEnd?: () => void;
 };
+/** One nav item; `subMenu` renders inline (expand/collapse), `secondaryItems` opens a separate SecondaryBar instead. */
 export type MenuProps = {
     id: string | number;
     title: string;
@@ -71,9 +76,11 @@ export type MenuProps = {
         variant?: string;
     };
     subMenu?: MenuProps[];
+    /** Non-empty on the active menu auto-collapses the main rail and renders a SecondaryBar, regardless of the `toggle` prop. */
     secondaryItems?: MenuProps[];
     group?: string;
 };
+/** Props for the internal MenuItems renderer — a narrowed slice of SidebarProps. */
 export type RenderMenuType = {
     menus: MenuProps[];
     activeMenu: string | number;
@@ -82,6 +89,7 @@ export type RenderMenuType = {
     selectedSubMenu?: string | null;
     selectedSecondaryItem?: string | number | null;
 };
+/** Secondary flyout panel props; `defaultCollapsed` only seeds initial state, then the panel self-manages it. */
 export type SecondaryBarProps = {
     items?: MenuProps[];
     defaultCollapsed?: boolean;
@@ -94,6 +102,7 @@ export type SecondaryBarProps = {
     title?: string;
     icon?: ElementType;
 };
+/** "Switch app" footer grid; becomes hover popovers when the sidebar is collapsed. */
 export type OtherAppsProps = {
     toggle: boolean;
     otherApps: {

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -1,4 +1,6 @@
+/** One row of sign-in device history rendered by SignInActivityTable. */
 export type SignInDevice = {
+    /** Falls back to "—" when falsy; device and activity below don't — a blank one renders as an empty cell, not a dash. */
     browser: string;
     device: string;
     activity: string;
@@ -14,6 +16,7 @@ export type SignInActivityLabels = {
     recentActivity?: string;
     noActivity?: string;
 };
+/** Read-only 3-column device list (browser, device, activity) on raw Chakra table parts, not the library Table — no row actions, closed props, no ref/...rest passthrough. */
 export interface SignInActivityTableProps {
     devices: SignInDevice[];
     isLoading?: boolean;

package/dist/Components/Skeletons/SkeletonProps.d.ts

@@ -1,4 +1,6 @@
 import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/react";
+/** Closed prop list, no ...rest, no borderRadius/margin — for those or a ref use Chakra's Skeleton (Primitives barrel) instead. */
 export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
+    /** isLoaded, children, bg, color, fadeDuration only apply to type="skeleton" — circle/text accept but silently ignore them. */
     type: "skeleton" | "circle" | "text";
 } & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;

package/dist/Components/Skeletons/Skeletons.d.ts

@@ -1,2 +1,3 @@
 import { SkeletonProps } from "./SkeletonProps";
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
 export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Skeletons/Skeletons.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Skeletons;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
 function Skeletons({ startColor, endColor, height = "20px", isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === "skeleton" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, children: children })), type === "circle" && (0, jsx_runtime_1.jsx)(react_1.SkeletonCircle, { size: size, speed: speed }), type === "text" && ((0, jsx_runtime_1.jsx)(react_1.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
 }

package/dist/Components/Slider/Slider.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 type ImageSliderProps = {
     images: SliderImage[];
+    /** interval <= 0 disables auto-advance entirely (no timer set) — it does not mean "no delay"/immediate. */
     interval?: number;
     isArrow?: boolean;
     mobileImages?: SliderImage[];
@@ -11,7 +12,9 @@ type SliderImage = {
     previewUrl: string;
     /** Optional URL used on small viewports when provided via `mobileImages`. */
     mobilePreviewUrl?: string;
+    /** Sorts the main track, but pagination dots follow the array's original order — pass images pre-sorted by order to keep dots in sync. */
     order: number;
 };
+/** Auto-advancing image/content carousel — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
 declare const Slider: React.FC<ImageSliderProps>;
 export default Slider;

package/dist/Components/Slider/Slider.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 outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/** Auto-advancing image/content carousel — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
 const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { StageItemProps } from "./StageProgressProps";
+/** Renders one chevron/bar/pill stage — for variant="stepper", StageProgress renders StepperStage internally instead. */
 declare const StageItem: React.FC<StageItemProps>;
 export default StageItem;

package/dist/Components/StageProgress/StageItem.js

@@ -26,6 +26,7 @@ const clipFor = (index, total, a) => {
         return `polygon(0 0, 100% 0, 100% 100%, 0 100%, ${a}px 50%)`;
     return `polygon(0 0, calc(100% - ${a}px) 0, 100% 50%, calc(100% - ${a}px) 100%, 0 100%, ${a}px 50%)`;
 };
+/** Renders one chevron/bar/pill stage — for variant="stepper", StageProgress renders StepperStage internally instead. */
 const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { StageProgressProps } from "./StageProgressProps";
+/** Multi-stage pipeline tracker (chevron/bar/pills/stepper) — stepper ignores tooltipThreshold and minStageWidth. */
 declare const StageProgress: React.FC<StageProgressProps>;
 export default StageProgress;

package/dist/Components/StageProgress/StageProgress.js

@@ -16,6 +16,7 @@ const gapFor = {
     pills: "8px",
     stepper: "0",
 };
+/** Multi-stage pipeline tracker (chevron/bar/pills/stepper) — stepper ignores tooltipThreshold and minStageWidth. */
 const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "md", colorScheme = "primary", markCompleted = true, showCheck = false, isReadOnly = false, isLoading = false, minStageWidth, scrollActiveIntoView = true, tooltipThreshold = 20, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {

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

@@ -1,23 +1,28 @@
 import { CustomThemeProps } from "../../Theme/themeProps";
+/** Size preset keying each renderer's own pixel/spacing lookup table. */
 export type StageSize = "sm" | "md" | "lg";
+/** Palette key: brand colors resolve direct, others (success/error/warning/info) via theme.colors.semantic. */
 export type StageColorScheme = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+/** Per-stage render state; StageProgress derives it from index vs. the active stage. */
 export type StageState = "completed" | "active" | "upcoming";
 /** Visual style of the tracker. */
 export type StageVariant = "chevron" | "bar" | "pills" | "stepper";
+/** One entry in StageProgressProps.stages — the ordered pipeline this tracker renders. */
 export interface Stage {
     id: string | number;
     label: string;
     /** Disable selecting this stage individually. */
     disabled?: boolean;
 }
+/** Top-level props for StageProgress; per-item rendering is delegated to StageItemProps/StepperStageProps. */
 export interface StageProgressProps {
     /** Ordered list of pipeline stages. */
     stages: Stage[];
     /** Visual style. Default "chevron". */
     variant?: StageVariant;
-    /** id of the currently active stage. */
+    /** Must exactly match a stage.id — no match silently renders every stage as "upcoming" (nothing active). */
     value?: string | number;
-    /** Fired when a stage is clicked (ignored when isReadOnly). */
+    /** Skipped when isReadOnly, or when that specific stage's own `disabled` is true. */
     onChange?: (id: string | number, stage: Stage, index: number) => void;
     size?: StageSize;
     colorScheme?: StageColorScheme;
@@ -29,13 +34,14 @@ export interface StageProgressProps {
     isReadOnly?: boolean;
     /** Show the loading skeleton row instead of stages. */
     isLoading?: boolean;
-    /** Min width of each chevron. */
+    /** Ignored for variant="stepper" (fixed per-size circle width there) — applies to chevron/bar/pills only. */
     minStageWidth?: string;
     /** Auto-scroll the active stage into view. Default true. */
     scrollActiveIntoView?: boolean;
-    /** Label length beyond which a tooltip is shown. Default 20. */
+    /** Also only applies to chevron/bar/pills — variant="stepper" never shows a tooltip, however long the label. */
     tooltipThreshold?: number;
 }
+/** Props for one chevron/bar/pills stage; variant="stepper" renders StepperStage/StepperStageProps instead. */
 export interface StageItemProps {
     label: string;
     index: number;
@@ -53,6 +59,7 @@ export interface StageItemProps {
     scrollIntoViewWhenActive?: boolean;
     tooltipThreshold?: number;
 }
+/** Props for one stepper-variant node; leftDone/rightDone fill the connector line per side. */
 export interface StepperStageProps {
     label: string;
     /** 1-based step number shown inside the circle. */
@@ -72,6 +79,7 @@ export interface StepperStageProps {
     rightDone: boolean;
     scrollIntoViewWhenActive?: boolean;
 }
+/** Color set for one scheme's states, returned by resolveStagePalette (soft/strong/muted + text). */
 export interface StagePalette {
     soft: string;
     softText: string;

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

@@ -1,2 +1,3 @@
 import { SwitchProps } from "./SwitchProps";
+/** Renders as clickable <li> items with no role or keyboard handling — mouse-only; not an accessible substitute for ToggleSwitch or SegmentedControl. */
 export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Switch/Switch.js

@@ -4,6 +4,7 @@ exports.default = Switch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Renders as clickable <li> items with no role or keyboard handling — mouse-only; not an accessible substitute for ToggleSwitch or SegmentedControl. */
 function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Read the palette directly: it is already swapped for the active mode, so pairing the rungs

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

@@ -1,3 +1,4 @@
+/** Two-label segmented control (leftText/rightText via switchActive), NOT a binary toggle — for on/off use ToggleSwitch. */
 export type SwitchProps = {
     leftText: string;
     rightText: string;

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

@@ -6,12 +6,15 @@ export type { FilterValues } from "./filterTypes";
 export type { TableVariant, TableVariantTokens } from "./variants/tokens";
 /** Dynamic row shape (cells, styles, callbacks). */
 export type DataObject = Record<string, unknown>;
+/** Row-height preset controlling row height and cell vertical padding. */
 export type TableDensity = "compact" | "normal" | "comfortable";
+/** Empty-state content shown when there are no rows; alternative to a raw ReactNode. */
 export type TableEmptyState = {
     icon?: ReactNode;
     title?: string;
     description?: string;
 };
+/** Props for the main Table component: data, columns, pagination, selection, filters, and more. */
 export type TableProps = {
     data: DataObject[];
     columns: TableHeaderProps[];
@@ -86,6 +89,7 @@ export type TableProps = {
     };
     onRefresh?: () => void;
 };
+/** Config for the bulk-actions toolbar (delete/update/custom items) shown for the current selection. */
 export type HeaderActionsProps = {
     isDelete?: {
         enabled?: boolean;
@@ -107,6 +111,7 @@ export type HeaderActionsProps = {
         type: "divider";
     })[];
 };
+/** Column definition: label, sort/search/freeze flags, and optional status or custom cell renderer. */
 export type TableHeaderProps = {
     label: string | number;
     id: string | number;
@@ -123,14 +128,17 @@ export type TableHeaderProps = {
 };
 /** Known field data-types (open-ended via the trailing string for forward-compat). */
 export type TableColumnType = "text" | "singleline" | "multiLine" | "description" | "email" | "phone" | "website" | "number" | "integer" | "decimal" | "dropdown" | "multiSelectDropdown" | "user" | "date" | "date_time" | "time" | "not_assigned" | (string & {});
+/** One entry in the export-format dropdown, paired with `handleExportChange`. */
 export type ExportOption = {
     label: string;
     id: string;
 };
+/** Current sort direction applied to one column. */
 export type ColumnSortingProps = {
     column: string | number;
     direction: "asc" | "desc" | "none";
 };
+/** Props for the TableHeader row subcomponent: all columns, sorting, search, freeze, selection. */
 export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
@@ -149,6 +157,7 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     columnsSearch: Record<string, string>;
     isSelecting?: boolean;
 };
+/** Props for the TableBody subcomponent; renders flat rows or grouped Monday-style board rows. */
 export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze" | "density" | "stripe" | "emptyState"> & {
     startRow: number;
     endRow: number;
@@ -164,6 +173,7 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     groups?: TableRenderGroup[];
     onAddItem?: (groupValue: string | number) => void;
 };
+/** One resolved group of rows with its label/accent colors, for grouped board rendering. */
 export type TableRenderGroup = {
     value: string | number;
     label: string;
@@ -175,12 +185,14 @@ export type TableRenderGroup = {
     };
     rows: DataObject[];
 };
+/** Props for one column's search/filter popover. */
 export type TableFiltersProps = {
     header: TableHeaderProps;
     setColumnsSearch: (searchVal: string) => void;
     columnsSearch: string;
     onClose: () => void;
 };
+/** Props for a single column's header cell: sorting, filtering, freeze state, width. */
 export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "freezedBgColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
     header: TableHeaderProps;
     index: number;
@@ -189,6 +201,7 @@ export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor"
     columnsSearch: Record<string, string>;
     setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;
 };
+/** Pairs a column header with its current sort state, e.g. for a sort-icon renderer. */
 export type SortingProps = {
     isSorting: ColumnSortingProps | undefined;
     header: TableHeaderProps;

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

@@ -1,4 +1,5 @@
 import React from "react";
+/** CompactSelect's option shape — also what SelectedFilterItem.value holds for select/user filters. */
 export type Options = {
     id: string | number;
     label: string;

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

@@ -4,34 +4,42 @@ import type { FilterValues } from "../filterTypes";
 export type FilterItem = {
     id: string;
     label: string;
+    /** Omit it and the item is a value-less toggle — no operator/value control ever renders. */
     type?: "text" | "select" | "user" | "date";
     option?: {
         id: string;
         label: string;
     }[];
-    /** Alternate options key used by some consumers */
+    /** Takes precedence over `option` when both are set; `option` is only used as a fallback. */
     selectOption?: Options[];
 };
 export type FilterSection = {
     id: string;
     label: string;
     items?: FilterItem[];
+    /** Only effective with 2+ sections (Accordion) — a single section always renders expanded. */
     initiallyExpanded?: boolean;
+    /** Renders single-select radio buttons instead of checkboxes; only the first `selected` entry is used. */
     radio?: boolean;
 };
 export type SelectedFilterItem = {
     id: string;
+    /** Must match an operator from TEXT_OPERATORS (text) or "is"/"is not" (select/user); unused for date. */
     condition?: string;
+    /** Shape follows `type`: string for text, `Date` for date, a full `{id,label}` object for select/user. */
     value?: unknown;
     type?: "text" | "select" | "user" | "date";
 };
 export type LeftFilterPaneProps = {
     title?: string;
+    /** Ignored when `filterMode="modal"` — height is forced to 100% then. */
     height?: number | string;
     sections: FilterSection[];
     selected?: FilterValues;
+    /** Also fires on Clear All, but only when `filterMode` is "sidebar" (the default). */
     onApply?: (selected: FilterValues) => void;
     onClear?: () => void;
+    /** Required — unlike most components here, this is not read internally via `useCustomTheme`. */
     theme: CustomThemeProps;
     isApplyLoading?: boolean;
     filterMode?: "sidebar" | "modal";

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