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

package/dist/Components/CustomModulesTable/CustomModulesTableProps.d.ts

@@ -1,8 +1,11 @@
+/** One row in the modules table; `ownerLabel` is display-only and has no counterpart in UpdateModulePayload. */
 export type ModuleItem = {
+    /** snake_case, unlike moduleName/ownerLabel here and unlike UpdateModulePayload.moduleId — casing isn't symmetric. */
     module_id: number;
     moduleName: string;
     ownerLabel?: string;
 };
+/** Shape passed to onUpdateModule — `moduleId` identifies the item being edited, `moduleName` is the new value from the modal. */
 export type UpdateModulePayload = {
     moduleId: number;
     moduleName: string;
@@ -27,15 +30,19 @@ export type CustomModulesTableLabels = {
     confirmDeletion?: string;
     deleteConfirmPrefix?: string;
 };
+/** Fixed 2-column module list (name, owner) built on raw Chakra table parts, not the library Table — closed props, no ref/...rest reach the root Box. */
 export interface CustomModulesTableProps {
     modules: ModuleItem[];
     isLoading?: boolean;
     isUpdating?: boolean;
     isDeleting?: boolean;
+    /** Edit modal closes once this promise resolves; a rejection is unhandled (never caught) and isUpdating only toggles the button spinner, not the close. */
     onUpdateModule?: (payload: UpdateModulePayload) => void | Promise<void>;
+    /** Delete modal closes once this promise resolves; a rejection is unhandled (never caught) and isDeleting only toggles the button spinner, not the close. */
     onDeleteModule?: (moduleId: number) => void | Promise<void>;
     labels?: CustomModulesTableLabels;
 }
+/** Internal edit-name dialog rendered by CustomModulesTable; `labels` must already be fully resolved, not per-key optional. */
 export interface EditModuleModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -44,6 +51,7 @@ export interface EditModuleModalProps {
     onSubmit: (name: string) => void | Promise<void>;
     labels: Required<Pick<CustomModulesTableLabels, "editModuleTitle" | "moduleNamePlaceholder" | "cancel" | "update">>;
 }
+/** Internal delete-confirmation dialog rendered by CustomModulesTable; `moduleName` is optional since the target can be cleared mid-close. */
 export interface DeleteModuleModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/Components/DatePicker/CalendarPanel.d.ts

@@ -25,5 +25,6 @@ export type CalendarPanelProps = {
     /** Custom content inside a day cell, replacing that day's built-in marker dot. */
     renderDayContent?: RenderDayContent;
 };
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 export declare const CalendarPanel: React.FC<CalendarPanelProps>;
 export default CalendarPanel;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -12,6 +12,7 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const dayStates_1 = require("./dayStates");
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rangeBg = theme.colors.primary.opacity[16];

package/dist/Components/DatePicker/DatePicker.d.ts

@@ -1,2 +1,3 @@
 import { DatePickerProps } from "./DatePickerProps";
+/** Legacy pre-split implementation, still used internally by Table's filter pane — new code should use ThemeDatePicker (exported as DatePicker). */
 export default function CustomDatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/DatePicker/DatePicker.js

@@ -24,6 +24,7 @@ const inferPickerTypeFromFormat = (formatStr) => {
         return "time";
     return "date";
 };
+/** Legacy pre-split implementation, still used internally by Table's filter pane — new code should use ThemeDatePicker (exported as DatePicker). */
 function CustomDatePicker(props) {
     var _a, _b;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText = "Select a date", dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -1,5 +1,7 @@
 import type { DayStates, RenderDayContent } from "./dayStates";
+/** Governs which UI renders inside the popover — date grid, time selects, or both; inferred from dateFormat when omitted. */
 export type PickerType = "date" | "time" | "datetime";
+/** Fields shared by both picker variants — combined via `&` with Single/RangeDatePickerProps below, never used on its own. */
 export type BaseDatePickerProps = {
     id?: string;
     name?: string;
@@ -12,6 +14,7 @@ export type BaseDatePickerProps = {
     helperText?: string;
     placeholderText?: string;
     dateFormat?: string;
+    /** Ignored by RangeDatePicker — only `dateFormat`'s time tokens decide whether time inputs render, never this. */
     pickerType?: PickerType;
     minDate?: Date;
     maxDate?: Date;
@@ -24,6 +27,7 @@ export type BaseDatePickerProps = {
     /** Chakra `Input` / `InputGroup` size for the field and chevron (calendar/clock) scale. */
     size?: "xs" | "sm" | "md" | "lg";
 };
+/** Single-date variant — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */
 export type SingleDatePickerProps = BaseDatePickerProps & {
     isRange?: false;
     selectedDate?: Date | null;
@@ -31,15 +35,18 @@ export type SingleDatePickerProps = BaseDatePickerProps & {
     value?: Date | null;
     onChange: (date: Date | null) => void;
 };
+/** A date range's two endpoints, each independently nullable — used for both the controlled value and onChange's payload. */
 export type RangeDate = {
     from: Date | null;
     to: Date | null;
 };
+/** Range variant — `isRange` must be true; adds dayStates/renderDayContent day-marking on top of the shared base fields. */
 export type RangeDatePickerProps = BaseDatePickerProps & {
     isRange: true;
     selectedDate?: RangeDate | null;
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: RangeDate | null;
+    /** Only fires via Apply or Escape once both ends are picked — clicking outside the popover discards the pending range instead of committing it. */
     onChange: (range: RangeDate | null) => void;
     /**
      * Marks individual days with zero or more state keys — `["weekly-off"]`, `["Onam", "holiday"]`,
@@ -62,7 +69,9 @@ export type RangeDatePickerProps = BaseDatePickerProps & {
      */
     renderDayContent?: RenderDayContent;
 };
+/** Discriminated union consumed by ThemeDatePicker (exported as DatePicker) — `isRange` selects Single vs Range at the type level. */
 export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
+/** Props for the Hour/Minute/AM-PM trio; `dateFormat` only toggles 12h vs 24h display — seconds aren't supported. */
 export type TimePickerProps = {
     date: Date;
     onChange: (date: Date) => void;

package/dist/Components/DatePicker/RangeDatePicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { RangeDatePickerProps } from "./DatePickerProps";
+/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
 export declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
 export default RangeDatePicker;

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -24,6 +24,7 @@ const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
+/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
 const RangeDatePicker = (props) => {
     var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", dayStates, renderDayContent, } = props;

package/dist/Components/DatePicker/SingleDatePicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { SingleDatePickerProps } from "./DatePickerProps";
+/** Date/datetime field with typed-mask input + calendar popover. Import via `DatePicker` (ThemeDatePicker) — direct import bypasses its isRange/pickerType routing. */
 export declare const SingleDatePicker: React.FC<SingleDatePickerProps>;
 export default SingleDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -225,6 +225,7 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     }
     return { value: buf, completed: buf.length >= segmentLength };
 };
+/** Date/datetime field with typed-mask input + calendar popover. Import via `DatePicker` (ThemeDatePicker) — direct import bypasses its isRange/pickerType routing. */
 const SingleDatePicker = (props) => {
     var _a, _b;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;

package/dist/Components/DatePicker/ThemeDatePicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { DatePickerProps } from "./DatePickerProps";
+/** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType`; `pickerType` is silently ignored whenever `isRange` is true. */
 declare const ThemeDatePicker: React.FC<DatePickerProps>;
 export default ThemeDatePicker;

package/dist/Components/DatePicker/ThemeDatePicker.js

@@ -14,6 +14,7 @@ const inferPickerTypeFromFormat = (formatStr) => {
         return "time";
     return "date";
 };
+/** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType`; `pickerType` is silently ignored whenever `isRange` is true. */
 const ThemeDatePicker = (props) => {
     var _a, _b;
     if (props.isRange) {

package/dist/Components/DatePicker/TimeOnlyPicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { SingleDatePickerProps } from "./DatePickerProps";
+/** Pure time field ThemeDatePicker renders for pickerType="time". Its label never receives `id`, so it is never associated with the field. */
 export declare const TimeOnlyPicker: React.FC<SingleDatePickerProps>;
 export default TimeOnlyPicker;

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -16,9 +16,12 @@ const TimePickerInput_1 = require("./TimePickerInput");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+/** Pure time field ThemeDatePicker renders for pickerType="time". Its label never receives `id`, so it is never associated with the field. */
 const TimeOnlyPicker = (props) => {
     var _a, _b;
-    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md", } = props;
+    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md",
+    // NOTE: name/minDate/maxDate/disableFutureDates/disablePastDates/autoComplete exist on the type but are silently dropped here.
+     } = props;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);

package/dist/Components/DatePicker/TimePicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { TimePickerProps } from "./DatePickerProps";
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
 declare const TimePicker: React.FC<TimePickerProps>;
 export default TimePicker;

package/dist/Components/DatePicker/TimePicker.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
 const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const is12HourFormat = /(hh|h).*a/i.test(dateFormat);

package/dist/Components/DatePicker/TimePickerInput.d.ts

@@ -10,5 +10,6 @@ interface TimePickerInputProps {
     error?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
 }
+/** Masked HH:mm digit input, no seconds; has no `name`/`id` prop, so it can't be targeted by native form APIs. */
 export declare const TimePickerInput: React.FC<TimePickerInputProps>;
 export {};

package/dist/Components/DatePicker/TimePickerInput.js

@@ -91,6 +91,7 @@ const caretFromDigitIndex = (digitIndex, digitsLen) => {
     return digitIndex + 1;
 };
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+/** Masked HH:mm digit input, no seconds; has no `name`/`id` prop, so it can't be targeted by native form APIs. */
 const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const sizeKey = typeof size === "string" ? size : "md";

package/dist/Components/Divider/Divider.d.ts

@@ -1,2 +1,3 @@
+/** Always vertical, fixed size/color, zero props — exported name keeps a "VeritcalDivider" typo; not interchangeable with Primitives' Divider. */
 declare const VeritcalDivider: () => import("react/jsx-runtime").JSX.Element;
 export default VeritcalDivider;

package/dist/Components/Divider/Divider.js

@@ -3,6 +3,7 @@ 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");
+/** Always vertical, fixed size/color, zero props — exported name keeps a "VeritcalDivider" typo; not interchangeable with Primitives' Divider. */
 const VeritcalDivider = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: colors.boxborder[500] }));

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -1,4 +1,5 @@
 import { DrawerProps as ChakraDrawerProps } from "@chakra-ui/react";
+/** Curated Pick of Chakra's DrawerProps plus overrides — `vaiant` is a typo'd, unused field; the real prop is `variant`. */
 export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant"> & {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
     placement?: "top" | "right" | "bottom" | "left";

package/dist/Components/Dropdown/DropDown.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { DropdownProps } from "./DropdownProps";
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use Select/SelectV2. */
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;

package/dist/Components/Dropdown/DropDown.js

@@ -19,6 +19,7 @@ const SIZE_MAP = {
     lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
     xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
 };
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use Select/SelectV2. */
 const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -1,5 +1,7 @@
 import { ButtonProps } from "@chakra-ui/react";
+/** Props for the action-menu Dropdown — nothing here is "selected" or persisted; for picking a value from a list use Select/SelectV2. */
 export type DropdownProps = {
+    /** Rendered only for the default dropdownType="button" — has no effect under dropdownType="text" (use `text` there). */
     ButtonText?: string;
     options: Option[];
     handleOptionSelect: (id: string | number, label: string) => void;
@@ -25,6 +27,7 @@ export type DropdownProps = {
 type Option = {
     id: string | number;
     label: string;
+    /** Icon component reference (e.g. `Star`), not a rendered element like `<Star />` — passed to Chakra's `as`. */
     image?: React.ElementType;
 };
 export {};

package/dist/Components/Editor/Editor.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { EditorProps } from "./EditorProps";
+/** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
 declare const Editor: React.NamedExoticComponent<EditorProps>;
 export default Editor;

package/dist/Components/Editor/Editor.js

@@ -46,6 +46,7 @@ const JoditEditor = react_1.default.lazy(async () => {
     const mod = (await Promise.resolve().then(() => __importStar(require("jodit-react"))));
     return { default: ((_a = mod.default) !== null && _a !== void 0 ? _a : mod) };
 });
+/** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
 const Editor = react_1.default.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,

package/dist/Components/Editor/EditorProps.d.ts

@@ -1,7 +1,9 @@
 import type JoditEditor from "jodit-react";
 import type { ComponentProps } from "react";
 type JoditEditorProps = ComponentProps<typeof JoditEditor>;
+/** Props for the lazy-loaded Jodit wrapper; a `config.theme`/`config.popupRoot` you pass overrides this library's own dark-mode fix. */
 export type EditorProps = Pick<JoditEditorProps, "value" | "config" | "className" | "onChange" | "onBlur"> & {
+    /** `key` is dead (React reserves it, never reaches Jodit); `editorRef.current` stays null until the lazy chunk loads. */
     editorRef?: JoditEditorProps["ref"];
     key?: string | number;
 };

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,2 +1,3 @@
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput or PinInputs instead. */
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -5,13 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput or PinInputs instead. */
 function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { borderRadius: "md", border: "0.063rem solid", 
-                        // [800], not [300]: WCAG 1.4.11 needs >=3.0 for a control boundary against any
-                        // named surface up to `muted` (lightest); [300] fails there, [800] clears all
-                        // with margin.
-                        borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { borderRadius: "md", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
                         } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -1,10 +1,14 @@
+/** Props for the full OTP verification card (icon, title, resend link); for a bare input in your own layout use PinInput/PinInputs. */
 export type VerifyEmailOtpProps = {
     resendMail: () => void;
     onChange: (value: string) => void;
+    /** Fires once all `pins` cells are filled — a `pins` value that doesn't match the actual OTP length blocks or truncates completion. */
     onComplete: (value: string) => void;
     placeholder?: string;
+    /** Typed as required, but the implementation silently defaults to 5 if a caller bypasses the type and omits it. */
     pins: number;
     title: string;
+    /** A second, hardcoded line — "your new Pixel Account" — is always appended below this text; there's no prop to remove it. */
     description: string;
     isDisabled?: boolean;
     isInvalid?: boolean;

package/dist/Components/EmptyState/EmptyState.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { EmptyStateProps } from "./EmptyStateProps";
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
 declare const EmptyState: React.FC<EmptyStateProps>;
 export default EmptyState;

package/dist/Components/EmptyState/EmptyState.js

@@ -20,6 +20,7 @@ const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "seconda
     : scheme === "gray"
         ? colors.gray
         : colors.semantic[scheme];
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
 const EmptyState = ({ title = "No data found", description, icon: IconComp = lucide_react_1.Inbox, image, size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "240px", sx, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];

package/dist/Components/EmptyState/EmptyStateProps.d.ts

@@ -1,7 +1,10 @@
 import { ElementType, ReactNode } from "react";
 import { BoxProps } from "@chakra-ui/react";
+/** Controls badge/icon size, type scale, and spacing together. */
 export type EmptyStateSize = "sm" | "md" | "lg";
+/** Palette used to tint the icon badge — brand scale or semantic tone. */
 export type EmptyStateColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "success" | "error" | "warning" | "info";
+/** Props for the centered empty/zero-data placeholder; pass `action` for any real button(s)/CTA. */
 export interface EmptyStateProps {
     /** Heading text. Defaults to "No data found". */
     title?: string;

package/dist/Components/FeedbackForm/FeedbackForm.d.ts

@@ -5,12 +5,15 @@ export type FeedbackPayload = {
     lastName: string;
     email: string;
 };
+/** Provide onSubmit or submitUrl — with neither, the form still validates and shows a success toast, but nothing is ever sent. */
 export type FeedbackFormProps = {
     onSubmit?: (payload: FeedbackPayload) => Promise<void> | void;
     submitUrl?: string;
     isSubmittingText?: string;
     submitText?: string;
+    /** Only seeds state via useState's initializer on mount — changing this prop later does not resync the rendered fields. */
     defaultValues?: Partial<FeedbackPayload>;
     isDisabled?: boolean;
 };
+/** Renders its own success/error toast via Chakra's useToast, not this library's Toaster — that toast can be silently hidden inside a Modal. */
 export default function FeedbackForm(props: FeedbackFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/FeedbackForm/FeedbackForm.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 // eslint-disable-next-line no-control-regex, no-useless-escape
 const emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
+/** Renders its own success/error toast via Chakra's useToast, not this library's Toaster — that toast can be silently hidden inside a Modal. */
 function FeedbackForm(props) {
     var _a, _b, _c, _d, _e;
     const { onSubmit, submitUrl, isDisabled, defaultValues, submitText = "Submit", isSubmittingText = "Submitting..." } = props;

package/dist/Components/FieldSelectModal/FieldSelectModal.d.ts

@@ -15,12 +15,13 @@ export interface FieldSelectModalProps {
     confirmText?: string;
     loadingText?: string;
     isLoading?: boolean;
-    /** Pre-selected field_name values. Defaults to all selected. */
+    /** Pre-selected field_name values (defaults to all selected); re-applied whenever this or `fields` changes reference while open. */
     defaultSelected?: string[];
     /** Columns in the field grid. */
     columns?: number;
-    /** Show the search box (auto-hidden under 8 fields by default). */
+    /** Show the search box (auto-hidden under 8 fields by default); "Select all" still applies to every field, not just visible matches. */
     searchable?: boolean;
 }
+/** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
 declare const FieldSelectModal: React.FC<FieldSelectModalProps>;
 export default FieldSelectModal;

package/dist/Components/FieldSelectModal/FieldSelectModal.js

@@ -7,6 +7,7 @@ const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const MotionModalContent = (0, framer_motion_1.motion)(react_2.ModalContent);
+/** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
 const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select Fields", confirmText = "Apply", loadingText = "Applying...", isLoading = false, defaultSelected, columns = 2, searchable, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [selected, setSelected] = (0, react_1.useState)([]);

package/dist/Components/FilePreview/FilePreview.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { FilePreviewProps, FilePreviewTriggerProps } from "./FilePreviewProps";
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
 export declare const FilePreview: React.FC<FilePreviewProps>;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export declare const FilePreviewTrigger: React.FC<FilePreviewTriggerProps>;

package/dist/Components/FilePreview/FilePreview.js

@@ -40,6 +40,7 @@ const downloadFile = async (fileUrl, fileName) => {
         window.open(fileUrl, "_blank", "noopener,noreferrer");
     }
 };
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
 const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [zoom, setZoom] = (0, react_1.useState)(1);

package/dist/Components/FilePreview/FilePreviewProps.d.ts

@@ -1,10 +1,12 @@
+/** Preview renderer to use; "other" falls back to a download-only panel. */
 export type FilePreviewKind = "image" | "pdf" | "video" | "other";
+/** Props for FilePreview, a modal viewer that infers image/pdf/video/other from the file extension. */
 export interface FilePreviewProps {
     isOpen: boolean;
     onClose: () => void;
-    /** URL of the file to preview. */
+    /** Changing this while isOpen stays true does NOT reset zoom/rotation — remount via key={fileUrl}. */
     fileUrl: string;
-    /** Display name (also used as the download filename). */
+    /** Drives kind-detection instead of fileUrl when set — a name with no extension forces the no-preview fallback. */
     fileName?: string;
     /** Force a renderer. When omitted it is inferred from the file extension. */
     fileType?: FilePreviewKind;
@@ -13,6 +15,7 @@ export interface FilePreviewProps {
     /** Modal size. */
     size?: "md" | "lg" | "xl" | "2xl" | "full";
 }
+/** Props for FilePreviewTrigger — a thumbnail that opens FilePreview in a modal on click. */
 export interface FilePreviewTriggerProps {
     /** URL of the file. */
     fileUrl: string;

package/dist/Components/FileUpload/FileUpload.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { FileUploaderProps } from "./FileUploadProps";
+/** Controlled drop zone — you own the `uploadedFiles`/File[] state; default `maxSizeKB=5` is 5KB and rejects nearly every real file. */
 declare const FileUpload: React.FC<FileUploaderProps>;
 export default FileUpload;

package/dist/Components/FileUpload/FileUpload.js

@@ -42,6 +42,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const constants_1 = require("./constants");
 const Modal_1 = __importStar(require("../Modal/Modal"));
+/** Controlled drop zone — you own the `uploadedFiles`/File[] state; default `maxSizeKB=5` is 5KB and rejects nearly every real file. */
 const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", }) => {
     const compact = size === "sm";
     const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/FileUpload/FileUploadProps.d.ts

@@ -1,10 +1,14 @@
+/** File extensions FileUpload accepts via `acceptTypes`; each must have a mapping in `mimeMap`. */
 export type MimeExtension = '.jpg' | '.jpeg' | '.png' | '.gif' | '.webp' | '.svg' | '.pdf' | '.doc' | '.docx' | '.xls' | '.xlsx' | '.ppt' | '.pptx' | '.txt' | '.csv' | '.mp4' | '.mov' | '.mp3' | '.wav' | '.zip' | '.rar' | '.7z';
+/** Extension-to-MIME-type lookup consumed by react-dropzone's `accept` option; see `mimeMap` in constants.ts. */
 export type MimeMap = Record<MimeExtension, string>;
+/** Props for FileUpload, a controlled drop zone; the caller owns `uploadedFiles` state. */
 export type FileUploaderProps = {
     onFilesUploaded: (files: File[]) => void;
     uploadedFiles: File[];
     onRemoveFile?: (file: File) => void;
     acceptTypes?: MimeExtension[];
+    /** KB, not MB — default 5 means 5KB; the rendered hint text shows "0.00 MB" at that default. Always pass a realistic value. */
     maxSizeKB?: number;
     maxFiles?: number;
     size?: 'sm' | 'md';

package/dist/Components/FileUploader/FileUploader.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { FileUploaderProps } from "./FileUploaderProps";
+/** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
 declare const FileUploader: React.FC<FileUploaderProps>;
 export default FileUploader;

package/dist/Components/FileUploader/FileUploader.js

@@ -7,6 +7,7 @@ const lucide_react_1 = require("lucide-react");
 const Toaster_1 = require("../Toaster/Toaster");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
     const { showToast } = (0, Toaster_1.useToaster)();
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/FileUploader/FileUploaderProps.d.ts

@@ -1,3 +1,4 @@
+/** Metadata only, not a real File/Blob — previewUrl is a blob: URL for images; there is no way to recover the original File. */
 export type UploadedFile = {
     id: string;
     name: string;
@@ -5,6 +6,7 @@ export type UploadedFile = {
     type?: string;
     previewUrl?: string;
 };
+/** Same name as FileUpload's own, unrelated props type — this one is not exported from the package; only FileUpload's ships publicly. */
 export type FileUploaderProps = {
     maxFiles?: number;
     maxTotalSize?: number;

package/dist/Components/FilterSidebar/FilterSidebar.d.ts

@@ -19,12 +19,14 @@ export type FilterSection = {
     };
     initiallyExpanded?: boolean;
     type?: "checkboxes" | "radio";
+    /** Dead — never read; radio mode is decided by `type === "radio"` or `radio` below, checkboxes is the unconditional default. */
     checkboxes?: boolean;
     radio?: boolean;
 };
 export type SelectedFilters = FilterValues;
 export type FilterSidebarProps = {
     sidebarOptions: FilterSection[];
+    /** Passing this alone (no onChange) makes every filter click silently inert — state is computed, then discarded. */
     selected?: SelectedFilters;
     onChange?: (selected: SelectedFilters) => void;
     onApply?: (selected: SelectedFilters) => void;
@@ -33,6 +35,7 @@ export type FilterSidebarProps = {
     variant?: "minimal" | "cards";
     containerHeight?: number | string;
     containerPadding?: number | string;
+    /** Dead — commented out of the destructure; has no effect (same for sliderMode below). */
     headerPadding?: number;
     panelPadding?: number;
     sliderMode?: "chakra" | "native";

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;