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

package/dist/Components/Accordion/Accordion.d.ts

@@ -1,3 +1,4 @@
 import { AccordionProps } from "./AccordionProps";
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/dist/Components/Accordion/Accordion.js

@@ -8,6 +8,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accordionColors_1 = require("./accordionColors");
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main);

package/dist/Components/Accordion/AccordionProps.d.ts

@@ -1,8 +1,10 @@
 import { AccordionProps as ChakraAccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps } from "@chakra-ui/react";
+/** Chakra's AccordionProps plus the header/content rows to render; each row can override its own button/panel/item styles. */
 export type AccordionProps = ChakraAccordionProps & {
     items: {
         header: React.ReactNode;
         content: React.ReactNode;
+        /** Spread after the built-in style props (incl. `_hover`) — `bg`/`_hover` here replace, not merge, the expanded/hover highlight. */
         buttonProps?: AccordionButtonProps;
         panelProps?: AccordionPanelProps;
         itemProps?: AccordionItemProps;

package/dist/Components/AlertDialog/AlertDialog.d.ts

@@ -1,3 +1,4 @@
 import { AlertDialogsProps } from "./AlertDialogProps";
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
 declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }: AlertDialogsProps) => import("react/jsx-runtime").JSX.Element;
 export default AlertDialog;

package/dist/Components/AlertDialog/AlertDialog.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");
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
 const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));

package/dist/Components/AlertDialog/AlertDialogProps.d.ts

@@ -1,5 +1,6 @@
 import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
 import { ReactElement } from "react";
+/** colorScheme/size/status/variant/addRole (Picked from Chakra's AlertProps) are typed but never read — buttons are hardcoded; style via button1Style/button2Style. */
 export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
     title: string;
     content: ReactElement;
@@ -15,5 +16,6 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
     closeButtonStyle?: React.CSSProperties;
     button1Style?: React.CSSProperties;
     button2Style?: React.CSSProperties;
+    /** React reserves "key" and never forwards it as a prop, so this is always undefined here — no effect. */
     key?: string | number;
 };

package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChart.d.ts

@@ -1,3 +1,4 @@
 import { ApexAreaChartProps } from "./ApexAreaChartProps";
+/** Filled line chart (basic/stacked/gradient/sparkline); unlike `ApexLineChart`, `data`/`series` are read fresh via `useMemo` every render, not frozen at mount. */
 declare const ApexAreaChart: ({ variant, data, series, labels, title, titlePosition, height, width, colors, showLegend, legendPosition, yAxisFormatter, }: ApexAreaChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexAreaChart;

package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js

@@ -9,6 +9,7 @@ const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
+/** Filled line chart (basic/stacked/gradient/sparkline); unlike `ApexLineChart`, `data`/`series` are read fresh via `useMemo` every render, not frozen at mount. */
 const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
     const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);

package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChartProps.d.ts

@@ -1,10 +1,14 @@
+/** "sparkline" strips axes, legend and title for a compact inline trend; the others only change fill/stacking. */
 export type AreaChartVariant = "basic" | "stacked" | "gradient" | "sparkline";
+/** One named line in a multi-series area chart; `name` becomes its legend label. */
 export type ApexAreaSeries = {
     name: string;
     data: number[];
 };
+/** Props for the area chart; unlike ApexLineChart, `data`/`series` are re-read every render, not frozen at mount. */
 export type ApexAreaChartProps = {
     variant?: AreaChartVariant;
+    /** Ignored entirely once `series` is also passed — `series` always wins, no merge. */
     data?: number[];
     series?: ApexAreaSeries[];
     labels?: string[];

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChartProps.d.ts

@@ -1,10 +1,14 @@
+/** Renders grouped/stacked/distributed bars from `series`, or one series from `data`+`seriesName`; not a substitute for ApexLineChart on trend-over-time data. */
 export type ApexBarChartProps = {
+    /** Ignored whenever `series` is also passed — series wins outright and data is silently dropped, not merged. */
     data?: number[];
     labels: string[];
     title?: string;
+    /** No default here (renders ApexCharts' native left-align) — every sibling chart in this family defaults it to "center". */
     titlePosition?: "left" | "center" | "right";
     height?: number | string;
     width?: number | string;
+    /** Array paints per-bar only when `distributed` is true; otherwise only barColor[0] applies and the rest are silently unused. */
     barColor?: string[];
     xAxisStyle?: StyleProps;
     yAxisStyle?: StyleProps;
@@ -12,11 +16,13 @@ export type ApexBarChartProps = {
     horizontal?: boolean;
     distributed?: boolean;
     seriesName?: string;
+    /** Multi-series bars — {name, data}[], not data's flat number[]; passing this alongside `data` makes data a no-op. */
     series?: {
         name: string;
         data: number[];
     }[];
     stacked?: boolean;
+    /** Unset default isn't fixed — shows only when `series` has more than one entry; the single-`data` path stays legend-less. */
     showLegend?: boolean;
     legendPosition?: "top" | "right" | "bottom" | "left";
 };

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts

@@ -1,13 +1,19 @@
+/** Renders exactly one line from `data`; not a substitute for ApexBarChart/ApexPieChart when comparing multiple series side by side. */
 export type ApexLineChartProps = {
+    /** "realtime" doesn't animate your data — after mount it overwrites the series with Math.random() values every second instead. */
     variant?: LineChartVariant;
+    /** Read only at mount — later prop updates are silently ignored unless this component remounts (new `key`). */
     data: number[];
     labels?: string[];
+    /** Only series[0] is read, as the single line's name — there is no way to render more than one line here. */
     series?: string[];
     title?: string;
     height?: number | string;
     width?: number | string;
     lineColors?: string[];
+    /** Ignored once the chart renders in compact/small mode — the fallback title there is always left-aligned regardless of this value. */
     titlePosition?: "left" | "center" | "right";
+    /** Despite the name, gates only the tooltip and hover markers — the line itself still renders when this is false. */
     showSeries?: boolean;
     titleStyle?: {
         color?: string;
@@ -18,6 +24,7 @@ export type ApexLineChartProps = {
     compact?: boolean;
     titleClampLines?: number;
     showTitleEllipsis?: boolean;
+    /** Declared but never read by this component — has zero effect here; ApexPieChart/ApexPolarCharts implement the same shape and apply it. */
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
@@ -25,4 +32,5 @@ export type ApexLineChartProps = {
     };
     toolbarBreakpointPct?: number;
 };
+/** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant` below. */
 export type LineChartVariant = "basic" | "realtime";

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -1,11 +1,14 @@
+/** Renders pie/donut slices from parallel `data`+`labels` arrays; not a substitute for ApexPolarCharts, whose wedges vary by radius, not arc share. */
 export type ApexPieChartProps = {
     variant?: DonutPieVariant;
     data: number[];
+    /** Must be the same length and order as `data` — index i labels index i; a mismatched length misaligns slices silently, no warning. */
     labels: string[];
     title?: string;
     height?: number | string;
     width?: number | string;
     donutColors?: string[];
+    /** Wins over `donutColors` when both are set — donutColors is then silently ignored, not merged with it. */
     chartColor?: string[];
     titlePosition?: "left" | "center" | "right";
     titleStyle?: {
@@ -15,7 +18,9 @@ export type ApexPieChartProps = {
         fontFamily?: string;
     };
     legendPosition?: "left" | "right" | "top" | "bottom";
+    /** True alone doesn't guarantee labels — with the default labelPlacement="auto", a numeric height under 240 forces them off, no warning. */
     showDataLabels?: boolean;
+    /** Slices below this render an empty-string label, not a hidden one — text silently vanishes on small slices even with showDataLabels true. */
     minLabelPercent?: number;
     surfaceColor?: string;
     donutSize?: string;
@@ -31,4 +36,5 @@ export type ApexPieChartProps = {
         markerOffsetY?: number;
     };
 };
+/** Visual preset for the pie/donut fill; "pie-with-image" is fixed to two placeholder images, not configurable via props. */
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.d.ts

@@ -1,6 +1,8 @@
+/** Renders polarArea wedges (radius varies by value, angles equal) from parallel `data`+`labels`; not a substitute for ApexPieChart's equal-radius arcs. */
 export type ApexPolarChartProps = {
     variant?: PolarVariant;
     data: number[];
+    /** Must be the same length and order as `data` — index i labels index i; a mismatched length misaligns wedges silently, no warning. */
     labels: string[];
     title?: string;
     height?: number | string;
@@ -19,4 +21,5 @@ export type ApexPolarChartProps = {
         position?: "top" | "right" | "bottom" | "left";
     };
 };
+/** "monochrome" recolors every wedge as shades of one hue instead of the palette's distinct series colors. */
 export type PolarVariant = "basic" | "monochrome";

package/dist/Components/Apexcharts/ApexRadialChart/ApexRadialChart.d.ts

@@ -1,3 +1,4 @@
 import { ApexRadialChartProps } from "./ApexRadialChartProps";
+/** Radial/gauge chart (gauge/multi/semi); `hollowSize` is silently overridden to a fixed `"52%"` whenever `variant="multi"`. */
 declare const ApexRadialChart: ({ variant, data, labels, title, titlePosition, height, width, colors, totalLabel, trackColor, hollowSize, }: ApexRadialChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexRadialChart;

package/dist/Components/Apexcharts/ApexRadialChart/ApexRadialChart.js

@@ -9,6 +9,7 @@ const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
+/** Radial/gauge chart (gauge/multi/semi); `hollowSize` is silently overridden to a fixed `"52%"` whenever `variant="multi"`. */
 const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition = "left", height = 320, width = "100%", colors, totalLabel = "Total", trackColor, hollowSize = "62%", }) => {
     const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);

package/dist/Components/Apexcharts/ApexRadialChart/ApexRadialChartProps.d.ts

@@ -1,4 +1,6 @@
+/** "semi" draws a half-circle gauge; "multi" stacks several bars and forces its own hollow size (see `hollowSize`). */
 export type RadialChartVariant = "gauge" | "multi" | "semi";
+/** Props for the radial/gauge chart; `totalLabel` only renders when `variant="multi"`, which also ignores `hollowSize`. */
 export type ApexRadialChartProps = {
     variant?: RadialChartVariant;
     data: number[];
@@ -10,5 +12,6 @@ export type ApexRadialChartProps = {
     colors?: string[];
     totalLabel?: string;
     trackColor?: string;
+    /** Ignored when `variant="multi"` — the ring width is hardcoded to `"52%"` in that variant. */
     hollowSize?: string;
 };

package/dist/Components/AppSwitcher/AppSwitcherProps.d.ts

@@ -1,10 +1,12 @@
 import type { ComponentType, ReactNode } from "react";
+/** Icon component signature AppMark renders with size+color — matches lucide-react's icon shape exactly. */
 export type AppIconComponent = ComponentType<{
     size?: number | string;
     color?: string;
 }>;
 /** A lucide-style component, a ready node, or nothing — then the mark falls back to initials. */
 export type AppIcon = AppIconComponent | ReactNode;
+/** One app in the switcher's grid; missing/duplicate `id` or a missing `url` (without `locked`) warn once in dev only. */
 export interface AppOption {
     id: string;
     name: string;
@@ -28,6 +30,7 @@ export interface AppSwitcherProps {
     /** Called instead of following the link. Call `event.preventDefault()` to keep the panel's own navigation. */
     onSelect?: (app: AppOption, event: React.MouseEvent | React.KeyboardEvent) => void;
     onOpenChange?: (isOpen: boolean) => void;
+    /** The only thing that shows the search box — searchThreshold below is currently inert (kept for API compat). */
     isSearchable?: boolean;
     searchThreshold?: number;
     /** Keyboard shortcut that opens the panel, e.g. "mod+shift+a". `null` disables it. */
@@ -45,14 +48,17 @@ export interface AppSwitcherProps {
 /** Up to two initials, so a mark stays legible without an icon. */
 export declare const appInitials: (name: string) => string;
 export declare const filterApps: (apps: AppOption[], query: string) => AppOption[];
+/** Minimal keyboard-event shape `matchesShortcut` needs, so callers can test a shortcut without a real KeyboardEvent. */
 export type ShortcutEvent = Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">;
 /** "mod" is Cmd on Apple platforms and Ctrl everywhere else. */
 export declare const matchesShortcut: (event: ShortcutEvent, shortcut: string, isApple?: boolean) => boolean;
 export declare const formatShortcut: (shortcut: string, isApple?: boolean) => string;
+/** Input to `buildSuiteApps`: an `AppOption` keyed by its subdomain label, with `url` optional since it can be derived. */
 export interface SuiteAppSource extends Omit<AppOption, "url"> {
     subdomain: string;
     url?: string;
 }
+/** The consumer's own absolute origin, plus which hostname label identifies it — `buildSuiteApps` swaps that label per app. */
 export interface SuiteUrlOptions {
     baseUrl: string;
     baseSubdomain: string;

package/dist/Components/AppearanceSettings/AppearanceSettingsProps.d.ts

@@ -1,9 +1,11 @@
 import type { SelectV2Size } from "../SelectV2/SelectV2Props";
+/** i18n overrides for this panel's field labels; any key left out keeps the library's English default. */
 export type AppearanceSettingsLabels = {
     theme?: string;
     colorMode?: string;
     fontSize?: string;
 };
+/** Controlled brand/font-size pickers; the color-mode switch is uncontrolled and reads/writes theme context directly. */
 export type AppearanceSettingsProps = {
     brand?: string;
     fontSize?: string;

package/dist/Components/Breadcrumbs/BreadcrumbsProps.d.ts

@@ -1,10 +1,13 @@
 import { BreadcrumbProps } from "@chakra-ui/react";
+/** `isCurrentPage` marks only the last item in `items`; `handleClick` fully replaces the link's default navigation. */
 export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
     isCurrentPage?: boolean;
+    /** Accepted but never read by Breadcrumbs — has no effect at all. */
     isLastChild?: boolean;
     handleClick: (path: string) => void;
     items: BreadcrumbItem[];
 };
+/** One crumb: `label` is the visible text, `path` is passed to both the link's href and `handleClick`. */
 export type BreadcrumbItem = {
     path: string;
     label: string;

package/dist/Components/Button/ButtonProps.d.ts

@@ -3,12 +3,15 @@ type LayoutProps = Pick<ChakraButtonProps, "as" | "m" | "mt" | "mb" | "ml" | "mr
 type DataAttributes = {
     [key: `data-${string}`]: string | number | boolean | undefined;
 };
+/** Themed Chakra Button; loadingText defaults to the literal "Loading" (pass "" for spinner-only) — for a plain unthemed <button>, see the separate Buttons component. */
 export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
     label?: string;
+    /** Defaults to "fit-content", not 100%; the w alias only applies when width is unset — width wins if both are passed. */
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs" | "xl";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
     type?: "button" | "submit" | "reset";
+    /** Ignored when variant="gradient" — that variant always paints the theme's fixed gradient pair, not this scheme. */
     colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
     ref?: React.Ref<HTMLButtonElement>;
     children?: React.ReactNode;

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -1,14 +1,18 @@
 import { ReactElement } from "react";
+/** Themed Chakra ButtonGroup wrapper (left icon + text button + right icon/dropdown) — closed prop list, no ...rest, text via buttonText only. */
 export type ButtonGroupIconProps = {
     leftIcon?: ReactElement;
     rightIcon?: ReactElement;
     onLeftIconClick?: () => void;
     onRightIconClick?: () => void;
+    /** Auto-wrapped in a tooltip showing full text, but only when it visually truncates (maxW 200px). */
     buttonText: string;
     onButtonClick?: () => void;
+    /** Fires on every click inside the group via DOM bubbling too — not just clicks on group chrome. */
     onButtongroupClick?: () => void;
     size?: "lg" | "md" | "sm" | "xs" | "xl";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
+    /** Actually Chakra's colorScheme (a palette name like "red"), not a CSS text or icon color. */
     color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
     buttonGroupStyle?: React.CSSProperties;
     buttonGroupLeftIconStyle?: React.CSSProperties;
@@ -16,6 +20,7 @@ export type ButtonGroupIconProps = {
     buttonStyle?: React.CSSProperties;
     onBlurLeftIcon?: () => void;
     onBlurRightIcon?: () => void;
+    /** Rendered only when BOTH rightIcon and rightIconDropdown are also set — otherwise silently unused. */
     dropdownOptions?: {
         label: string;
         id: string | number;
@@ -25,11 +30,13 @@ export type ButtonGroupIconProps = {
         label: string;
         id: string | number;
     }) => void;
+    /** Also requires rightIcon — without it, neither the dropdown nor a plain right icon button renders. */
     rightIconDropdown?: boolean;
     menulistStyle?: React.CSSProperties;
     menuItemStyle?: React.CSSProperties;
     isLoading?: boolean;
     divider?: boolean;
     leftIconLoading?: boolean;
+    /** Capitalized "R" unlike leftIconLoading — same casing must match exactly, there is no rightIconLoading. */
     RightIconLoading?: boolean;
 };

package/dist/Components/Buttons/ButtonsProps.d.ts

@@ -1,5 +1,7 @@
+/** Hardcoded Tailwind bg-purple-600 button, not theme-aware; not exported from the package root and not a group wrapper despite the plural name. */
 export type ButtonsProps = {
     label: string;
+    /** Typed with no event param, so preventDefault/stopPropagation aren't reachable through this prop. */
     onClick: () => void;
     className?: string;
     disabled?: boolean;

package/dist/Components/Card/CardProps.d.ts

@@ -1,10 +1,13 @@
 import { CardProps as ChakraCardProps } from "@chakra-ui/react";
+/** Plain padded Chakra Card wrapper for arbitrary children — not ProfileCard, which has Header/Body/Footer slots. */
 export type CardProps = Pick<ChakraCardProps, "direction" | "maxW" | "align" | "justify" | "overflow" | "sx"> & {
+    /** header, footer, dividercolor, dividersize and dividervariant are all declared but never read — Card renders only `children`, no divider. */
     header?: React.ReactNode;
     footer?: React.ReactNode;
     children: React.ReactNode;
     variant?: "elevated" | "outline" | "filled" | "unstyled";
     size?: "sm" | "md" | "lg";
+    /** Passed to Chakra as `colorScheme` — a token name like "blue", not a CSS color or hex value. */
     color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
     dividercolor?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
     dividersize?: string;

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -1,14 +1,19 @@
+/** Subscription/pricing-tier card — takes a `Plan` (billing cycle, features), not a physical product like ProductCard's `options`. */
 export type PaymentCardProps = {
     plan: Plan;
+    /** true hides the CTA button unless `isRenewal` is also true, no matter what `plan.buttonText` says. */
     isActive?: boolean;
     isNextUpgrade?: boolean;
     billingCycle: "monthly" | "yearly";
     onSelect?: (planId: number) => void;
+    /** `type` is always "button" in practice — PaymentCard never wires hover on the outer card, only the CTA button. */
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
+    /** The plan_id whose button should spin, not a boolean — matched via `===` against each plan's plan_id. */
     buttonLoading?: number;
     isLoading?: boolean;
     isRenewal?: boolean;
 };
+/** Plan data rendered by PaymentCard — `billing`/`tax` are pre-formatted display strings shown under the price, not derived from monthlyPrice/yearlyPrice. */
 export type Plan = {
     plan_id: number;
     name: string;
@@ -20,6 +25,7 @@ export type Plan = {
     features: string[];
     icon: React.ReactNode;
     buttonText: string;
+    /** "link" still gets the same filled bg/color override as "solid" — only "outline" is excluded from it. */
     buttonVariant: "solid" | "outline" | "link";
     popular?: boolean;
     buttonLoadingText?: string;

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,2 +1,3 @@
 import { CheckboxProps } from "./CheckboxProps";
+/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label — pass isInvalid (not just error) for the invalid state to register. */
 export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Checkbox/Checkbox.js

@@ -10,6 +10,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label — pass isInvalid (not just error) for the invalid state to register. */
 function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const controlSize = size === "sm" ? "1rem"

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -1,4 +1,5 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
+/** Curated Pick of Chakra's native CheckboxProps (not a full re-export) plus this library's label/tooltip/error additions. */
 export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick" | "aria-label" | "aria-labelledby" | "aria-describedby" | "id"> & {
     label?: string;
     labelFontSize?: string;
@@ -6,9 +7,12 @@ export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "s
     labelTooltip?: string;
     labelClampLines?: number;
     width?: string | number;
+    /** Not wired to this library's Checkbox theme (no variants key) — any effect comes from Chakra's own default, not design tokens. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    /** Maps to Chakra's colorScheme (icon/fill tint), not a CSS color — text color is fixed via theme tokens. */
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
     size?: "sm" | "md" | "lg";
+    /** error/errorMessage/helperText render as visible text only — no aria-describedby link to the input, and helperText hides whenever error is true. */
     error?: boolean;
     errorMessage?: string;
     helperText?: string;

package/dist/Components/Common/ErrorComponent.d.ts

@@ -1,4 +1,6 @@
+/** Inline error row for Input/PinInputs; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
 declare const ErrorComponent: ({ error, errorClassName, }: {
+    /** Required and rendered as-is — callers gate with `error && <ErrorComponent />` themselves; an empty string still draws the icon. */
     error: string;
     errorClassName?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Common/ErrorComponent.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+/** Inline error row for Input/PinInputs; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
 const ErrorComponent = ({ error, errorClassName, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const errorText = colors.semanticText.error;

package/dist/Components/Common/FormLabel.d.ts

@@ -1,11 +1,15 @@
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
 export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
     label: string;
+    /** Omit only when this sits inside another element's own `<label>` (e.g. Checkbox) — otherwise the visible text has no accessible association. */
     id?: string;
+    /** Both are required together — `isInformation` alone renders no icon at all; `informationMessage` alone is never read. */
     isInformation?: boolean;
     informationMessage?: string;
     isRequired?: boolean;
     fontSize?: string;
     showTooltip?: boolean;
+    /** Defaults to `label` when omitted, so a tooltip from `showTooltip` alone just repeats the visible text. */
     tooltipLabel?: string;
     clampLines?: number;
     inline?: boolean;

package/dist/Components/Common/FormLabel.js

@@ -9,6 +9,7 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
 const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const clampStyles = clampLines ? {

package/dist/Components/Common/FormattedDescription.d.ts

@@ -1,5 +1,7 @@
 type Props = {
+    /** Tiny pseudo-markdown only — "#"/"##"/"###" headings and "**bold**"; single "*italic*" markers are stripped but render with no italic style. */
     content?: string;
 };
+/** Not a full Markdown renderer — lists, links and code blocks render as literal text; returns null (no wrapper) when `content` is falsy. */
 declare const FormattedDescription: ({ content }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default FormattedDescription;

package/dist/Components/Common/FormattedDescription.js

@@ -41,6 +41,7 @@ const InlineText = ({ text }) => {
     }
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nodes });
 };
+/** Not a full Markdown renderer — lists, links and code blocks render as literal text; returns null (no wrapper) when `content` is falsy. */
 const FormattedDescription = ({ content }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (!content)

package/dist/Components/Common/HelperText.d.ts

@@ -1,3 +1,5 @@
+/** `id` is optional — pass one to control aria-describedby yourself; omitted, Chakra auto-generates one only inside a FormControl ancestor. */
+/** Renders `helperText` unconditionally; each field hides this while showing an error (see ErrorMessage) — HelperText itself has no `error` prop. */
 declare const HelperText: ({ helperText, id }: {
     helperText: string;
     id?: string;

package/dist/Components/Common/HelperText.js

@@ -3,6 +3,8 @@ 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");
+/** `id` is optional — pass one to control aria-describedby yourself; omitted, Chakra auto-generates one only inside a FormControl ancestor. */
+/** Renders `helperText` unconditionally; each field hides this while showing an error (see ErrorMessage) — HelperText itself has no `error` prop. */
 const HelperText = ({ helperText, id }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const field = (0, react_1.useFormControlContext)();

package/dist/Components/Common/Label.d.ts

@@ -1,3 +1,4 @@
+/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. */
 declare const Label: ({ label, htmlFor, labelClassName, isRequired, }: {
     label: string;
     /** id of the control being labelled. Omit rather than guess — `label` text is not an id. */

package/dist/Components/Common/Label.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 renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. */
 const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));

package/dist/Components/ContactForm/ContactForm.d.ts

@@ -1,3 +1,4 @@
 import { ContactFormProps } from "./ContactFormProps";
+/** Fully self-contained enquiry form — validates, POSTs to apiKey, and renders its own success/error alert; there is no onSubmit/onSuccess callback. */
 declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, buttonColorScheme, buttonSx, }: ContactFormProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactForm;

package/dist/Components/ContactForm/ContactForm.js

@@ -11,6 +11,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
 const Button_1 = __importDefault(require("../Button/Button"));
+/** Fully self-contained enquiry form — validates, POSTs to apiKey, and renders its own success/error alert; there is no onSubmit/onSuccess callback. */
 const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [formData, setFormData] = (0, react_1.useState)({

package/dist/Components/ContactForm/ContactFormProps.d.ts

@@ -1,11 +1,15 @@
 import { SystemStyleObject } from "@chakra-ui/react";
 import { ReactNode } from "react";
+/** apiKey is optional — omitting it fails submission silently with an inline "API key missing" alert, not a thrown error. */
 export interface ContactFormProps {
+    /** The POST endpoint URL the form fetches to — not an auth token; a real API key/secret string fails silently as an invalid URL. */
     apiKey?: string;
     customerId: string | number;
     organizationId: string | number;
     isDisabled?: boolean;
+    /** Rendered markup only — its values are never read automatically; pair with getCustomValues or they're dropped from the submitted payload. */
     customFields?: ReactNode;
+    /** Return value spreads into the payload after the built-in fields — a key like "email" silently overwrites the typed value; customerId/organizationId can't be overridden this way. */
     getCustomValues?: () => Record<string, unknown>;
     buttonColorScheme?: "primary" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "secondary" | "tertiary" | undefined;
     buttonSx?: SystemStyleObject;

package/dist/Components/CopyButton/CopyButton.d.ts

@@ -14,9 +14,11 @@ export interface CopyButtonProps {
     feedbackDuration?: number;
     /** Icon px size. */
     iconSize?: number;
+    /** Only affects the default "icon" variant's IconButton — "button" and "menu-item" ignore it. */
     size?: "xs" | "sm" | "md";
-    /** Called after a successful copy. */
+    /** Fires only if the clipboard write resolves — a denied/insecure-context failure is swallowed silently. */
     onCopy?: (value: string) => void;
 }
+/** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 declare const CopyButton: React.FC<CopyButtonProps>;
 export default CopyButton;

package/dist/Components/CopyButton/CopyButton.js

@@ -12,6 +12,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+/** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [copied, setCopied] = (0, react_1.useState)(false);