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

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -1,4 +1,5 @@
 import { type ChartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
+/** One organization in the switcher's list; `id` is matched against `value` to find the active one. */
 export interface OrgOption {
     id: string | number;
     /** Organization display name. */
@@ -8,13 +9,15 @@ export interface OrgOption {
     /** Optional logo image URL. Falls back to an initial-based avatar. */
     logoUrl?: string;
 }
+/** Trigger size; looked up in a fixed sizeMap for height, avatar and font sizing. */
 export type OrgSwitcherSize = "sm" | "md" | "lg";
+/** Session-scoped org switcher (trigger+popover) — not an admin screen; see OrganizationDetails for create/rename/delete/default. Closed prop list, no ...rest/ref on the trigger button. */
 export interface OrgSwitcherProps {
     /** Organizations to choose from. */
     organizations: OrgOption[];
     /** id of the currently active organization. */
     value?: string | number;
-    /** Fired when a different organization is picked. */
+    /** Not fired when the clicked org already matches value — only on an actual change. */
     onChange: (id: string | number, org: OrgOption) => void;
     /** Shows an inline spinner and disables interaction (e.g. while switching). */
     isLoading?: boolean;
@@ -24,6 +27,7 @@ export interface OrgSwitcherProps {
     searchThreshold?: number;
     /** Trigger styling. "ghost" suits a navbar; "outline"/"subtle" for forms. */
     triggerVariant?: "ghost" | "outline" | "subtle";
+    /** Default "md". */
     size?: OrgSwitcherSize;
     /** Max width of the trigger label before truncation. */
     maxWidth?: string;
@@ -39,6 +43,7 @@ export interface OrgSwitcherProps {
 export declare const AVATAR_COLORS: readonly string[];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
 export declare const AVATAR_INK = "#ffffff";
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 export declare const avatarColor: (seed: string, mode?: ChartMode) => string;
 /**
  * Fallback-avatar initials, up to 2 characters. A single letter reads well for one

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -9,6 +9,7 @@ exports.AVATAR_COLORS = [
 ];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
 exports.AVATAR_INK = "#ffffff";
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 const avatarColor = (seed, mode = "light") => {
     let hash = 0;
     for (let i = 0; i < seed.length; i += 1) {

package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+/** One organization row — active or invited — rendered as a card in OrganizationDetails' grid. */
 export type OrganizationItem = {
     orgId: number;
     company_name: string;
@@ -7,14 +8,14 @@ export type OrganizationItem = {
     default: number;
     /** 1 = active/accepted, 0 = pending invite. */
     uiInvite: number;
-    /** 1 when the org is protected and cannot be deleted. */
+    /** 1 always blocks delete, even if canDelete is explicitly true — not overridable like canRename/canDelete are. */
     defaultOrg: number;
     roleName?: string;
     /** True when the current user owns this org; the app computes ownership. */
     isOwner?: boolean;
     /** Overrides the role-name check for the rename control. */
     canRename?: boolean;
-    /** Overrides the role-name check for the delete control. */
+    /** Overrides the role-name check for delete — defaultOrg === 1 still blocks it regardless. */
     canDelete?: boolean;
     /**
      * Why delete is unavailable for this organization, shown on the disabled
@@ -22,6 +23,7 @@ export type OrganizationItem = {
      */
     deleteDisabledReason?: string;
 };
+/** Local form state for CreateOrgModal — the shape onSubmit receives when the create form is confirmed. */
 export type CreateOrgFormValues = {
     company_name: string;
     company_address: string;
@@ -29,6 +31,7 @@ export type CreateOrgFormValues = {
     default?: number;
     defaultOrg?: number;
 };
+/** All copy in OrganizationDetails is overridable here; unset fields fall back to its built-in DEFAULT_LABELS. */
 export type OrganizationDetailsLabels = {
     greeting?: string;
     manageSubtitle?: string;
@@ -66,11 +69,13 @@ export type OrganizationDetailsLabels = {
     copyright?: string;
     termsOfService?: string;
 };
+/** Payload for the public onCreateOrganization callback — company_address/phone optional here, unlike CreateOrgFormValues. */
 export interface CreateOrganizationValues {
     company_name: string;
     company_address?: string;
     phone?: string;
 }
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher (see OrgSwitcher for picking the active org). */
 export interface OrganizationDetailsProps {
     activeOrganizations: OrganizationItem[];
     invitedOrganizations: OrganizationItem[];
@@ -98,6 +103,7 @@ export interface OrganizationDetailsProps {
      * both the modal and `onDeleteOrganization`; omit it to keep the built-in flow.
      */
     onDeleteRequest?: (orgId: number) => void | Promise<void>;
+    /** Rejecting/throwing here leaves the modal open with no built-in error UI — same for onDeleteOrganization/onEditOrganization; show your own toast. */
     onCreateOrganization?: (values: CreateOrganizationValues) => void | Promise<void>;
     /** Called when the user confirms a new name for an organization */
     onEditOrganization?: (orgId: number, newName: string) => void | Promise<void>;
@@ -105,6 +111,7 @@ export interface OrganizationDetailsProps {
     footerSlot?: ReactNode;
     labels?: OrganizationDetailsLabels;
 }
+/** Props for the internal create-org modal; `labels` needs only the subset of OrganizationDetailsLabels it renders. */
 export interface CreateOrgModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -112,6 +119,7 @@ export interface CreateOrgModalProps {
     onSubmit: (values: CreateOrgFormValues) => void | Promise<void>;
     labels: Required<Pick<OrganizationDetailsLabels, "createOrganization" | "companyName" | "companyAddress" | "phone" | "cancel" | "submit" | "requiredField" | "invalidPhone">>;
 }
+/** Props for the internal delete-confirm modal; same narrowed-labels pattern as CreateOrgModalProps. */
 export interface DeleteOrgModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface PdfViewerProps {
-    /** URL of the PDF to embed. */
+    /** Rendered via a native browser <embed> — no fallback UI if the browser can't show PDFs inline. */
     pdfUrl: string;
     /** File name shown in the toolbar. */
     fileName?: string;
@@ -11,5 +11,6 @@ export interface PdfViewerProps {
     /** Border radius of the frame. */
     borderRadius?: string;
 }
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
 declare const PdfViewer: React.FC<PdfViewerProps>;
 export default PdfViewer;

package/dist/Components/PdfViewer/PdfViewer.js

@@ -10,6 +10,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
 const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const toolbarSurface = theme.colors.background[50];

package/dist/Components/PinInput/PinInput.d.ts

@@ -1,2 +1,3 @@
 import { ChakraPinInputProps } from "./PinInputProps";
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. Not to be confused with the unexported `PinInputs/PinInputs.tsx`. */
 export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, id, isRequired, isInformation, informationMessage, }: ChakraPinInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. Not to be confused with the unexported `PinInputs/PinInputs.tsx`. */
 function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { backgroundColor: theme.colors.background[100], 

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -1,4 +1,5 @@
 import { PinInputProps } from "@chakra-ui/react";
+/** The only pin/OTP component exported from the package — the similarly-named PinInputs in Components/PinInputs/ is dead code, not exported; do not deep-import it. */
 export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
     type?: "alphanumeric" | "number";
     size?: "xs" | "sm" | "md" | "lg";
@@ -6,6 +7,7 @@ export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultV
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";
     pins: number;
     label?: string;
+    /** Only feeds the visible label's htmlFor — no PinInputField ever receives this id, so the association points at nothing. */
     id?: string;
     isRequired?: boolean;
     isInformation?: boolean;

package/dist/Components/PinInputs/PinInputs.d.ts

@@ -1,3 +1,4 @@
 import { PinInputsProps } from "./PinInputsProps";
+/** Unused hand-rolled OTP input — not exported from index.ts and not referenced anywhere in this repo; use `PinInput` (from `Components/PinInput/`) instead. */
 declare const PinInputs: ({ length, label, error, onChange, onComplete, mask, placeholder, }: PinInputsProps) => import("react/jsx-runtime").JSX.Element;
 export default PinInputs;

package/dist/Components/PinInputs/PinInputs.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const Label_1 = __importDefault(require("../Common/Label"));
 const ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Unused hand-rolled OTP input — not exported from index.ts and not referenced anywhere in this repo; use `PinInput` (from `Components/PinInput/`) instead. */
 const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [values, setValues] = (0, react_1.useState)(Array(length).fill(""));

package/dist/Components/PinInputs/PinInputsProps.d.ts

@@ -1,3 +1,4 @@
+/** Not exported from index.ts and unused anywhere in this repo — for the library's real pin/OTP field, use PinInput instead. */
 export type PinInputsProps = {
     length?: number;
     label?: string;

package/dist/Components/PlanBadge/PlanBadgeProps.d.ts

@@ -1,4 +1,5 @@
 import { PlanBadgeInput } from "../../Utils/planBadge";
+/** Props for the top-bar plan badge; see PlanBadgeInput for the state this resolves into a PlanPill. */
 export interface PlanBadgeProps {
     /** The org's plan state. Resolved into label, tone and chip text internally. */
     input: PlanBadgeInput;
@@ -6,5 +7,6 @@ export interface PlanBadgeProps {
     maxLabelWidth?: string;
     /** Accessible label (falls back to `label — status`). */
     ariaLabel?: string;
+    /** Passed straight through to the underlying PlanPill button — same always-interactive caveat applies. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/Components/PlanPill/PlanPillProps.d.ts

@@ -4,6 +4,7 @@ import { ElementType } from "react";
  * badge reads as healthy / expiring soon / expired before the text is read.
  */
 export type PlanPillTone = "normal" | "warning" | "danger";
+/** Presentational plan-state pill — label/status/gradient only, no resolution logic. For org plan data, use PlanBadge instead of hand-deriving tone/copy here. */
 export interface PlanPillProps {
     /** Primary label, e.g. the plan name or an upgrade prompt. */
     label: string;
@@ -23,5 +24,6 @@ export interface PlanPillProps {
     maxLabelWidth?: string;
     /** Accessible label (falls back to `label — status`). */
     ariaLabel?: string;
+    /** Renders as a real <button> (hover-lift, pointer cursor, tabbable) even when omitted — there is no static/non-interactive mode. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -1,12 +1,17 @@
+/** Card size; drives width, image height and padding via ProductCard's own sizeStyles map. */
 export type SizeType = "xs" | "sm" | "md" | "lg";
+/** Compact catalog/grid tile (image + price + cart actions) — for a full gallery/description page use ProductDetails instead. */
 export type ProductCardProps = {
     id: string | number;
     label: string;
+    /** Accepted by the type but never read by ProductCard — passing it has no effect. */
     description?: string;
     productImage: productImage[];
+    /** Renders nothing at all past 4 tags — ProductTags' row layout has no case for 5 or more. */
     tags?: string[];
     rating?: string | number;
     reviews?: string | number;
+    /** Non-empty when provided — `[]` crashes the price dropdown; selection won't refresh if this array is later replaced. */
     options?: options[];
     onClick?: () => void;
     button?: {
@@ -15,6 +20,7 @@ export type ProductCardProps = {
     };
     onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
     onNotifyMe?: (id: string | number, var_id: number) => void;
+    /** Also fires once on mount for the default (first) option, not only when the shopper picks a different one. */
     onOptionChange?: (option: options) => void;
     addToCart?: boolean;
     goToCart?: boolean;
@@ -22,10 +28,12 @@ export type ProductCardProps = {
     OnGoToCart?: () => void;
     batch?: batch;
     size?: SizeType;
+    /** Accepted by the type but never read anywhere in ProductCard — always a no-op regardless of value. */
     avalabilitys?: boolean;
     isQtyEditable?: boolean;
     displayRating?: boolean;
 };
+/** One purchase variant (weight/price/stock) shown in the price dropdown; var_id identifies it to cart callbacks. */
 export type options = {
     label: string;
     weight: number;
@@ -35,10 +43,12 @@ export type options = {
     var_id: number;
     stocks: number;
 };
+/** Corner ribbon badge on the product image (e.g. "Sale"); color defaults to green when unset. */
 export type batch = {
     label: string;
     color?: string;
 };
+/** One gallery image; the first two (after filtering isImage !== false) are the cover and hover-swap. */
 export type productImage = {
     imageUrl: string;
     imageId: number;

package/dist/Components/ProductCard/ProductReview.d.ts

@@ -1,4 +1,5 @@
 type ProductReviewProps = {
+    /** Clamped 0-5, but the fill bar divides by 6 internally — a perfect 5 rating never fully fills the star. */
     rating?: string | number;
     reviewCount?: string | number;
     mb?: number;

package/dist/Components/ProductDetails/ProductDetailsProps.d.ts

@@ -1,9 +1,13 @@
 import { batch, options } from "../ProductCard/ProductCardProps";
+/** Full two-column product detail page (gallery + description + variant picker) — not a card; no size prop or container chrome. */
 export type ProductDetailsProps = {
     id: string | number;
+    /** Actually the weight/price variant list (same shape as ProductCard's `options`), not a number — must be non-empty. */
     price?: options[];
     label?: string;
+    /** Rendered through a mini-markdown parser (**bold**, *italic*, # heading) — literal asterisks aren't shown as-is. */
     shortdesc?: string;
+    /** Renders nothing at all past 4 tags — ProductTags' row layout has no case for 5 or more. */
     tags?: string[];
     images?: images[];
     batch?: batch;
@@ -11,6 +15,7 @@ export type ProductDetailsProps = {
     reviews?: string | number;
     onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
     onNotifyMe?: (id: string | number, var_id: number) => void;
+    /** Also fires once on mount for the default (first) option, not only when the shopper picks a different one. */
     onOptionChange?: (option: options) => void;
     addToCart?: boolean;
     goToCart?: boolean;
@@ -19,6 +24,7 @@ export type ProductDetailsProps = {
     isQtyEditable?: boolean;
     displayRating?: boolean;
 };
+/** Gallery item — isImage=false (or a non-image URL when omitted) renders as video with thumb as the poster; order is accepted but never used to sort. */
 export type images = {
     imageUrl: string;
     imageId: number;
@@ -26,6 +32,7 @@ export type images = {
     isImage?: boolean;
     thumb?: string;
 };
+/** Declared but unused — ProductImageSlider only accepts `images[]` (isImage/thumb cover video items); nothing currently consumes this type. */
 export type videos = {
     videoUrl: string;
     videoId: number;

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -1,7 +1,9 @@
 import { CardProps } from "@chakra-ui/react";
+/** Mirrors Chakra Card's own variant strings — forwarded to the underlying Card unchanged. */
 export type ProfileCardVariant = "elevated" | "outline" | "filled" | "unstyled";
 /** @deprecated Misspelling kept for existing callers — use "outline". */
 export type ProfileCardVariantLegacy = "outlein";
+/** borderTopColor/borderLeftColor are booleans toggling a fixed accent border color, not custom-color props; borderLeftColor wins if both are true. */
 export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
     /** Only direct ProfileCardHeader/Body/Footer children render — no wrapping fragment, no other siblings. */
     children: React.ReactNode;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -1,2 +1,3 @@
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -8,6 +8,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = (0, react_1.useState)(photoUrl);

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -1,6 +1,10 @@
+/** isEditable and isView are independent — both true shows edit and view actions side by side. */
 export type ProfilePhotoViewerProps = {
+    /** Seeds state on mount only — a later change to this prop is not re-synced; remount (key={photoUrl}) to update. */
     photoUrl: string;
+    /** Receives the raw File (not a URL, despite the param name) — fires only when isEditable and a file is picked. */
     onPhotoChange: (photoUrl: File) => void;
+    /** Also sets the height (maps to Chakra's boxSize) — there's no separate height prop; the frame is square. */
     imageWidth?: string;
     imageAlt?: string;
     imageObjectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
@@ -9,12 +13,16 @@ export type ProfilePhotoViewerProps = {
     editIconSize?: "xs" | "sm" | "md" | "lg" | "xl";
     editIconPositionRight?: string;
     editIconPositionBottom?: string;
+    /** Rounds only the edit/view IconButtons — the photo/avatar shape comes from imageBorderRadius, not this. */
     isRound?: boolean;
+    /** Inline style for the outer wrapper only — the edit/view buttons use the separate `style` prop below. */
     boxStyle?: React.CSSProperties;
     isView?: boolean;
+    /** Applied to BOTH edit and view IconButtons identically — no way to style them individually. */
     style?: React.CSSProperties;
+    /** Fires from the View IconButton — that button (and this handler) only renders when isView is true. */
     handleIsView?: () => void;
     fallbackText?: string;
-    /** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
+    /** When true (the actual default), edit/view icons stay hidden until hover; false keeps them always visible. */
     revealOnHover?: boolean;
 };

package/dist/Components/ProgressBar/ProgressBar.d.ts

@@ -1,2 +1,3 @@
 import { ProgressBarProps } from "./ProgressBarProps";
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
 export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, ...aria }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProgressBar/ProgressBar.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ProgressBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
 function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
     //  const theme = useCustomTheme();
     return ((0, jsx_runtime_1.jsx)(react_1.Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));

package/dist/Components/ProgressBar/ProgressBarProps.d.ts

@@ -1,6 +1,8 @@
 import { ProgressProps } from "@chakra-ui/react";
+/** Thin themed wrapper over Chakra's Progress — color and variant are custom additions, not from Chakra's own props. */
 export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "id"> & {
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary" | "secondary";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    /** Closed prop list, no ...rest, no borderRadius/margin — for those or a ref use Chakra's Progress (Primitives barrel) instead. */
     size?: "lg" | "md" | "sm" | "xs";
 };

package/dist/Components/RadioButton/RadioButtonProps.d.ts

@@ -7,6 +7,7 @@ export type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChec
     showLabelTooltip?: boolean;
     labelTooltip?: string;
 };
+/** Unlike ChakraRadioProps, showLabelTooltip may be a per-option predicate `(item) => boolean`, evaluated once per rendered option. */
 export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
     options: {
         label: string;

package/dist/Components/Reorder/Reorder.d.ts

@@ -1,7 +1,9 @@
 import { ReorderItem, ReorderListProps } from "./ReorderProps";
+/** The real prop surface — showRemoveIcon/onRemove work but are missing from the exported ReorderListProps in ReorderProps.tsx. */
 type ExtendedReorderListProps<T extends ReorderItem> = ReorderListProps<T> & {
     showRemoveIcon?: boolean;
     onRemove?: (id: string) => void;
 };
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, showRemoveIcon, onRemove, }: ExtendedReorderListProps<T>) => JSX.Element;
 export default ReorderList;

package/dist/Components/Reorder/Reorder.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const dnd_1 = require("@hello-pangea/dnd");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const handleDragEnd = (result) => {

package/dist/Components/Reorder/ReorderProps.d.ts

@@ -1,10 +1,13 @@
+/** Minimal shape for a draggable tile — previewUrl renders as the thumbnail image; name is only used as its alt-text fallback. */
 export interface ReorderItem {
     id: string;
     previewUrl: string;
     name?: string;
 }
+/** Incomplete — the shipped Reorder component also reads showRemoveIcon/onRemove, which aren't declared on this exported type. */
 export interface ReorderListProps<T extends ReorderItem> {
     label?: string;
     items: T[];
+    /** Fires on every completed drag, even a drop back at the start index — diff the array to detect a real change. */
     onReorder: (items: T[]) => void;
 }

package/dist/Components/RolesPermission/RolesPermissionProps.d.ts

@@ -1,6 +1,9 @@
 import { ReactNode } from "react";
+/** One column in the permission matrix — also the key passed to onPermissionChange. */
 export type PermissionKey = "read" | "create" | "edit" | "delete" | "import" | "export" | "automation";
+/** One row of the permission matrix, keyed by module — booleans mirror PermissionKey (automation is handled specially, see below). */
 export type Permission = {
+    /** "Automation" (case-insensitive) is special-cased: every column collapses to the single automation flag below, only the Read cell renders. */
     module: string;
     read: boolean;
     create: boolean;
@@ -10,11 +13,13 @@ export type Permission = {
     export?: boolean;
     automation?: boolean;
 };
+/** One row in the roles list — the same shape is passed back into onEditRole/onViewRole as the selected role. */
 export type RoleData = {
     roleName: string;
     createdBy: string;
     created_at: string;
     permission: Permission[];
+    /** Coerced via Number() before reaching onDeleteRole — a non-numeric id silently becomes NaN with no error. */
     roles_id: string;
     designation: string;
     makeSuperAdmin?: boolean;
@@ -22,7 +27,9 @@ export type RoleData = {
     trackLocation?: boolean;
     show_records?: boolean;
 };
+/** Top-level switch: "list" renders the roles table, "form" renders the create/edit/view role form. */
 export type RolesPermissionView = "list" | "form";
+/** Only relevant when view is "form" — mode "view" renders the permission form read-only. */
 export type RolesPermissionMode = "create" | "edit" | "view";
 /**
  * All user-facing strings. Provide translated values from the host app; every
@@ -63,6 +70,7 @@ export type RolesPermissionLabels = {
     deleteRole?: string;
     deleteRoleConfirm?: string;
 };
+/** Role list + role/permission-matrix form in one component (switch via `view`) — manages role definitions only, not user-to-role assignment (that's UserDetails' Change Role). */
 export interface RolesPermissionProps {
     /** Which view to render. */
     view: RolesPermissionView;
@@ -89,6 +97,7 @@ export interface RolesPermissionProps {
     onNewRole?: () => void;
     onViewRole?: (role: RoleData) => void;
     onEditRole?: (role: RoleData) => void;
+    /** Called synchronously right before the modal closes — no await, no loading state; errors must be surfaced outside this flow. */
     onDeleteRole?: (roleId: number) => void;
     onBack?: () => void;
     /** Form actions. */
@@ -108,6 +117,7 @@ export interface RolesPermissionProps {
     /** Outer padding override. Defaults to a compact value. */
     padding?: string;
 }
+/** Plain confirm dialog for one role at a time — no built-in awaiting of onConfirm, so pair it with your own loading/error handling. */
 export interface DeleteRoleModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/Components/ScrollToTop/ScrollToTop.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface ScrollToTopProps {
-    /** Content to wrap. The button watches the nearest scrollable ancestor. */
+    /** Content to wrap. Watches this element's direct parentElement only — not a scroll-search up the tree. */
     children: React.ReactNode;
     /** Tooltip label on the button. */
     tooltipLabel?: string;
@@ -8,12 +8,13 @@ export interface ScrollToTopProps {
     threshold?: number;
     /** Smooth-scroll duration in ms. */
     duration?: number;
-    /** Pin to a window-level scroll instead of the wrapped parent. */
+    /** Pin to window-level scroll — also the fix when the real scroll container isn't the direct parent. */
     useWindow?: boolean;
     /** Distance from the bottom edge. */
     bottom?: string;
     /** Distance from the right edge. */
     right?: string;
 }
+/** Visibility depends on the wrapped content's direct parent actually scrolling — see `children`. */
 declare const ScrollToTop: React.FC<ScrollToTopProps>;
 export default ScrollToTop;

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -11,6 +11,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+/** Visibility depends on the wrapped content's direct parent actually scrolling — see `children`. */
 const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const anchorRef = (0, react_1.useRef)(null);

package/dist/Components/Search/Search.d.ts

@@ -1,2 +1,3 @@
 import { SearchProps } from "./SearchProps";
+/** Plain filter/search input, no options list — default shortcut registers a page-global Ctrl+K listener that can't be disabled. */
 export default function Search({ placeholder, onSearch, onclose, shortcut, query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }: SearchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Search/Search.js

@@ -12,6 +12,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");
+/** Plain filter/search input, no options list — default shortcut registers a page-global Ctrl+K listener that can't be disabled. */
 function Search({ placeholder = "Search...", onSearch, onclose, shortcut = "Ctrl+K", query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const inputRef = (0, react_1.useRef)(null);

package/dist/Components/Search/SearchProps.d.ts

@@ -1,6 +1,8 @@
+/** Fully controlled — query and clearing it are owned by the caller; onclose only fires the callback, it doesn't clear query itself. */
 export type SearchProps = {
     placeholder?: string;
     onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Only "Ctrl+K" is valid, and the type has no "off" value — every mounted Search grabs this hotkey globally. */
     shortcut?: "Ctrl+K";
     query?: string;
     onclose: () => void;

package/dist/Components/SearchSelect/SearchSelect.d.ts

@@ -1,3 +1,4 @@
 import { SearchSelectProps } from "./SearchSelectProps";
+/** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
 declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, }: SearchSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchSelect;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -65,6 +65,7 @@ const normalizeMultiValue = (val) => {
     }
     return [];
 };
+/** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
 const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "md", chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, }) => {
     var _a, _b;
     const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -1,3 +1,4 @@
+/** value's shape must match isMultiple (array vs single object) — a mismatch normalizes to no selection, not an error. */
 export type SearchSelectProps = {
     id?: string;
     label?: string;
@@ -19,6 +20,7 @@ export type SearchSelectProps = {
     height?: string | number;
     size?: "xs" | "sm" | "md" | "lg";
     chip?: {
+        /** 0 is falsy and falls back to "no limit" (shows every chip) — pass 1+ to actually cap the count. */
         maxChips?: number;
         maxText?: number;
         onClick?: (options: Options | Options[]) => void;
@@ -42,10 +44,12 @@ export type SearchSelectProps = {
     isRemoveAllIcon?: boolean;
     isSelectAll?: boolean;
     pagination?: {
+        /** startIndex is 1-based (current options.length + 1), not a 0-based offset. */
         onScroll?: (startIndex: number, limit: number, query: string) => void;
         limit?: number;
         scrollLoading?: boolean;
     };
+    /** Not implemented — the option list always renders unvirtualized; use `pagination` to page in large datasets instead. */
     virtualization?: boolean;
     insideSelect?: {
         onSelect?: (options: Options) => void;
@@ -56,6 +60,7 @@ export type SearchSelectProps = {
         placeholder?: string;
     };
 };
+/** One selectable option; view, when set, fully replaces the default label rendering for that option's row. */
 export type Options = {
     id: string | number;
     label: string;