pixelize-design-library 2.4.2-beta.67 → 2.4.2-beta.69

package/README.md

@@ -22,9 +22,9 @@ A comprehensive React component library built with TypeScript, providing a rich
 
 Before you begin, ensure you have the following installed:
 
-- Node.js (v16 or higher)
+- Node.js (v18 or higher)
 - npm (v7 or higher) or yarn
-- React (v16.8 or higher)
+- React and React DOM `^18.3.1`
 
 ## Installation
 
@@ -115,8 +115,8 @@ Full rules for app developers and AI assistants: [`src/Theme/THEME-CONTRACT.md`]
 - **ButtonGroupIcon** - Icon-based button group
 - **Checkbox** - Checkbox input control
 - **DatePicker** - Date selection component
-- **Dropdown** - Dropdown selection component
-- **MultiSelect** - Multi-selection dropdown
+- **Dropdown** - Action menu (a menu button, not a value picker)
+- **MultiSelect** - Typed email-chip input (no options list)
 - **NumberInput** - Numeric input field
 - **PinInput** - PIN/OTP input component
 - **RadioButton** - Radio button input
@@ -124,11 +124,11 @@ Full rules for app developers and AI assistants: [`src/Theme/THEME-CONTRACT.md`]
 - **RangeSlider** - Single or dual-thumb slider with tick marks
 - **Search** - Search input component
 - **SearchSelect** - Searchable select dropdown
-- **Select** - Single selection dropdown
-- **Switch** - Toggle switch component
+- **Select** - Native or themed popup picker, single or multi, optionally searchable
+- **ToggleSwitch** - On/off switch (`Switch` is a deprecated two-option pill)
 - **TextInput** - Text input field
 - **InputTextArea** - Multi-line text input
-- **NoteTextArea** - Rich text editor
+- **NoteTextArea** - Textarea with a title and file attach (not rich text; use `Editor`)
 
 ### Data Display
 - **Table** - Data table component
@@ -146,7 +146,7 @@ Full rules for app developers and AI assistants: [`src/Theme/THEME-CONTRACT.md`]
 - **ConfirmDialog** - Cancel/Confirm prompt, with optional typed confirmation
 - **NotificationBell** - Badge/bell button
   - **NotificationPanel** / **NotificationList** / **NotificationItem** - the tray, its body and one row
-- **Loading** - Loading spinner component
+- **Loading** - Blocking loading overlay (`Backdrop` for a lighter scrim)
 - **Spinner** - Themed inline spinner
 - **Toaster** - Toast notification system
   - **useToaster** - Hook for toast management
@@ -288,6 +288,9 @@ function Root() {
 | `defaultMode` | `"system"` | `"light"` \| `"dark"` \| `"system"` |
 | `storageKey` | `"pixelize-theme"` | localStorage key |
 | `disablePersistence` | `false` | Don't read/write localStorage |
+| `onBrandChange` / `onModeChange` | — | Fire on user-driven changes only |
+| `themeOverrides` | — | Chakra theme object merged over the brand theme |
+| `reducedMotion` | `"components"` | `"global"` applies one reduced-motion rule to the whole document |
 
 ### Reading or changing the theme in code
 
@@ -331,7 +334,7 @@ const myDark = buildDarkPalette(lightPalettes.emerald);
 All components are built with TypeScript and include full type definitions:
 
 ```tsx
-import { ButtonProps } from 'pixelize-design-library';
+import { Button, ButtonProps } from 'pixelize-design-library';
 
 interface CustomButtonProps extends ButtonProps {
   customProp?: string;
@@ -418,8 +421,8 @@ block is generated: after adding or removing an export run
 `npm start` runs a local component explorer on `http://localhost:5173` — every exported
 component on its own page, with live variants, an interactive playground for editing props,
 and a generated props reference. The **Page examples** section shows full screens (dashboard,
-records list, record detail, settings, pipeline, inbox) built only from library exports, each with
-its loading, empty and error states.
+records list, record detail, settings, pipeline, inbox, app launcher, wizard, template editor,
+storefront) built only from library exports, each with its loading, empty and error states.
 
 ```bash
 npm install

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

@@ -1,21 +1,31 @@
 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 & {
+    /** One entry per accordion row, rendered in order. */
     items: {
+        /** Always-visible content of the row's toggle button. */
         header: React.ReactNode;
+        /** Panel body, shown while the row is expanded. */
         content: React.ReactNode;
         /** Spread after the built-in style props (incl. `_hover`) — `bg`/`_hover` here replace, not merge, the expanded/hover highlight. */
         buttonProps?: AccordionButtonProps;
         /** A control over the header's trailing edge, beside the button (a button inside a button is invalid); the header hover stays lit while the pointer is on it. Reserve its width in `header`. */
         headerAction?: React.ReactNode;
+        /** Props spread onto the row's panel. */
         panelProps?: AccordionPanelProps;
+        /** Props spread onto the row's item wrapper. */
         itemProps?: AccordionItemProps;
+        /** Inline style overrides per part of this row. */
         customStyles?: {
+            /** Inline style for the header button. */
             buttonStyle?: React.CSSProperties;
+            /** Inline style applied to the header button on hover. */
             hoverbuttonStyle?: React.CSSProperties;
             /** Overrides the action's default `right` (button padding + chevron slot); set it when `buttonStyle` changes the button padding. */
             headerActionStyle?: React.CSSProperties;
+            /** Inline style for the panel. */
             panelStyle?: React.CSSProperties;
+            /** Inline style for the item wrapper. */
             itemStyle?: React.CSSProperties;
         };
     }[];

package/dist/Components/AddressCard/AddressCardProps.d.ts

@@ -1,15 +1,20 @@
 import type { ReactNode } from "react";
 /** Visible copy; override every string for another language. */
 export interface AddressCardLabels {
+    /** Text of the tag shown when `isDefault` is set. */
     default: string;
+    /** Edit button text; also the verb in its accessible name. */
     edit: string;
+    /** Remove button text; also the verb in its accessible name. */
     remove: string;
 }
 /** A saved delivery address. Inside an `AddressCardGroup` it is a radio keyed by `value`; alone, `onSelect` makes it a toggle button. */
 export interface AddressCardProps {
     /** Identifies the card inside an `AddressCardGroup`; required there. */
     value?: string;
+    /** Recipient name, shown bold; also the card's accessible name when selectable. */
     name: string;
+    /** Recipient phone, shown in tabular figures under the address lines. */
     phone?: string;
     /** Address lines in order, e.g. ["12 Palm Grove, Indiranagar", "Bengaluru, Karnataka 560038"]. */
     lines: string[];
@@ -23,21 +28,31 @@ export interface AddressCardProps {
     selected?: boolean;
     /** Called when the card is chosen; also fires inside a group, after the group updates. */
     onSelect?: () => void;
+    /** Shows an Edit button when set; called on click. */
     onEdit?: () => void;
+    /** Shows a Remove button when set; called on click. */
     onRemove?: () => void;
     /** Dims the card, drops it from the tab order and ignores selection; Edit and Remove still work. */
     disabled?: boolean;
+    /** Overrides the default English strings; unset keys keep their default. */
     labels?: Partial<AddressCardLabels>;
+    /** Test id on the card's outer element. */
     "data-testid"?: string;
 }
 /** Radiogroup of `AddressCard`s with a roving tab stop; arrow keys move focus and selection together. */
 export interface AddressCardGroupProps {
+    /** Selected card's `value`; controls the group when set. */
     value?: string;
+    /** Initially selected `value` when the group is uncontrolled. */
     defaultValue?: string;
+    /** Called with the new `value` when selection changes by click or arrow key. */
     onValueChange?: (value: string) => void;
     /** Direct `AddressCard` children; wrapping them in another component hides their `value` from the roving tab stop. */
     children: ReactNode;
+    /** Accessible name of the radiogroup; give this or `aria-labelledby`. */
     "aria-label"?: string;
+    /** Id of the element that names the radiogroup. */
     "aria-labelledby"?: string;
+    /** Test id on the radiogroup element. */
     "data-testid"?: string;
 }

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

@@ -7,17 +7,28 @@ export type ApexAreaSeries = {
 };
 /** Props for the area chart; unlike ApexLineChart, `data`/`series` are re-read every render, not frozen at mount. */
 export type ApexAreaChartProps = {
+    /** Defaults to "basic"; "sparkline" also hides the title, axes and legend. */
     variant?: AreaChartVariant;
     /** Ignored entirely once `series` is also passed — `series` always wins, no merge. */
     data?: number[];
+    /** Multiple named lines; wins over `data`. The legend appears only when there is more than one series. */
     series?: ApexAreaSeries[];
+    /** X-axis category labels, one per data point; hidden in the "sparkline" variant. */
     labels?: string[];
+    /** Heading above the chart and the name of the series built from `data` (default "Series 1"); not drawn in "sparkline". */
     title?: string;
+    /** Horizontal alignment of the title. Defaults to "left". */
     titlePosition?: "left" | "center" | "right";
+    /** Chart height as a px number or CSS string. Defaults to 320; also sizes the loading skeleton. */
     height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to "100%"; also sizes the loading skeleton. */
     width?: number | string;
+    /** Series colours in order. Defaults to the theme's categorical series palette. */
     colors?: string[];
+    /** Defaults to true, but the legend only shows with more than one series and never in "sparkline". */
     showLegend?: boolean;
+    /** Legend placement. Defaults to "bottom". */
     legendPosition?: "top" | "right" | "bottom" | "left";
+    /** Formats y-axis tick labels from the numeric value; no effect in "sparkline", where the axis is hidden. */
     yAxisFormatter?: (value: number) => string;
 };

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

@@ -2,34 +2,50 @@
 export type ApexBarChartProps = {
     /** Ignored whenever `series` is also passed — series wins outright and data is silently dropped, not merged. */
     data?: number[];
+    /** Category labels, one per bar or bar group; they run along the vertical axis when `horizontal` is true. */
     labels: string[];
+    /** Heading above the chart, aligned by `titlePosition`. */
     title?: string;
-    /** No default here (renders ApexCharts' native left-align) — every sibling chart in this family defaults it to "center". */
+    /** No default here (renders ApexCharts' native left-align) — pie, line and polar charts default it to "center", area and radial to "left". */
     titlePosition?: "left" | "center" | "right";
+    /** Chart height as a px number or CSS string. Defaults to 400; also sizes the loading skeleton. */
     height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to 500; also sizes the loading skeleton. */
     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[];
+    /** Font and colour of x-axis labels; colour falls back to the theme's axis ink. */
     xAxisStyle?: StyleProps;
+    /** Font and colour of y-axis labels; colour falls back to the theme's axis ink. */
     yAxisStyle?: StyleProps;
+    /** Font and colour of the title; unset fields default to 14px, weight 600 and the theme's text ink. */
     titleStyle?: StyleProps;
+    /** Draws bars left to right instead of upward. Defaults to false. */
     horizontal?: boolean;
+    /** Gives each bar its own colour from `barColor` or the theme palette. Defaults to false (one colour). */
     distributed?: boolean;
+    /** Name of the single series built from `data`. Defaults to "Data"; ignored when `series` is passed. */
     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[];
     }[];
+    /** Stacks `series` on top of each other instead of grouping them side by side. Defaults to false. */
     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;
+    /** Legend placement. Defaults to "bottom". */
     legendPosition?: "top" | "right" | "bottom" | "left";
 };
 type StyleProps = {
+    /** CSS font size, e.g. "12px". Axis labels default to 12px, the title to 14px. */
     fontSize?: string;
+    /** CSS font family. Defaults to inherit, i.e. the page font. */
     fontFamily?: string;
+    /** CSS font weight. The title defaults to 600. */
     fontWeight?: string | number;
+    /** Text colour. Defaults to the theme's axis ink on axes and its text ink on the title. */
     color?: string;
 };
 export {};

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

@@ -4,25 +4,34 @@ export type ApexLineChartProps = {
     variant?: LineChartVariant;
     /** Read only at mount — later prop updates are silently ignored unless this component remounts (new `key`). */
     data: number[];
+    /** X-axis category labels, one per data point; omitted, the axis falls back to point positions. */
     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[];
+    /** Heading above the chart; in compact mode it is drawn as clamped text, with a tooltip when truncated. */
     title?: string;
+    /** Chart height as a px number or CSS string. A numeric height under 220 switches the chart to compact mode. */
     height?: number | string;
+    /** Chart width as a px number or CSS string; percentages resolve against the container. Under 280px it goes compact. */
     width?: number | string;
+    /** Line colours in order. Defaults to the theme's categorical series palette. */
     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;
+    /** Title colour and font; defaults to 14px, weight 600 and the text ink. Compact mode scales an unset fontSize to the width (12-18px). */
     titleStyle?: {
         color?: string;
         fontSize?: string;
         fontWeight?: number | string;
         fontFamily?: string;
     };
+    /** Forces compact mode: the title moves above the chart and zoom and toolbar turn off. Small sizes enable it automatically. */
     compact?: boolean;
+    /** Maximum title lines before clipping in compact mode. Defaults to 2 there; no effect outside compact mode. */
     titleClampLines?: number;
+    /** Adds "…" to a clipped compact title. Defaults to true; applies only when `titleClampLines` is 1. */
     showTitleEllipsis?: boolean;
     /** Declared but never read by this component — has zero effect here; ApexPieChart/ApexPolarCharts implement the same shape and apply it. */
     legendStyle?: {
@@ -30,6 +39,7 @@ export type ApexLineChartProps = {
         useSeriesColors?: boolean;
         position?: "top" | "right" | "bottom" | "left";
     };
+    /** Minimum chart width, as a fraction of its container, for the zoom toolbar to show. Defaults to 0.6. */
     toolbarBreakpointPct?: number;
 };
 /** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant`. */

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

@@ -1,33 +1,47 @@
 /** 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 = {
+    /** Visual preset. Defaults to "pie"; variants containing "pie" draw a full pie, the others a donut. */
     variant?: DonutPieVariant;
+    /** Slice values, one per label; data labels show each slice's share as a percent, tooltips the raw value. */
     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[];
+    /** Heading above the chart, aligned by `titlePosition`. */
     title?: string;
+    /** Chart height as a px number or CSS string. Defaults to 400; under 240 it hides auto-placed data labels. */
     height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to 500; also sizes the loading skeleton. */
     width?: number | string;
+    /** Slice colours in order. Defaults to the theme's categorical palette; overridden by `chartColor`. */
     donutColors?: string[];
     /** Wins over `donutColors` when both are set — donutColors is then silently ignored, not merged with it. */
     chartColor?: string[];
+    /** Horizontal alignment of the title. Defaults to "center". */
     titlePosition?: "left" | "center" | "right";
+    /** Title colour and font; defaults to 14px, weight 600 and the theme's text ink. */
     titleStyle?: {
         color?: string;
         fontSize?: string;
         fontWeight?: number | string;
         fontFamily?: string;
     };
+    /** Legend placement. Defaults to "bottom"; an invalid value logs a console warning and falls back to it. */
     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;
+    /** Colour of the gap stroke between slices and of pattern backdrops. Defaults to the theme's main background. */
     surfaceColor?: string;
+    /** Donut hole size as a CSS percent string. Defaults to "68%"; no effect on pie variants. */
     donutSize?: string;
+    /** Caption under the centre total. Defaults to "Total"; shown only for `variant="update-donut"`. */
     totalLabel?: string;
+    /** Where data labels sit. "auto" (default) means outside at height 240+ or non-numeric height, none below. */
     labelPlacement?: "auto" | "inside" | "outside" | "none";
     /** Only for `variant="pie-with-image"`: one image source per slice (the first repeats past the end). Omitted, each slice gets a themed striped texture in its own colour. */
     images?: string[];
+    /** Legend overrides (label colours, gaps, marker size and offsets); unset fields keep the themed defaults. */
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;

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

@@ -1,20 +1,29 @@
 /** 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 = {
+    /** Defaults to "basic"; "monochrome" shades every wedge from one hue. */
     variant?: PolarVariant;
+    /** Wedge values, one per label; a larger value extends its wedge farther from the centre. */
     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[];
+    /** Heading above the chart, aligned by `titlePosition`. */
     title?: string;
+    /** Chart height as a px number or CSS string. Defaults to 400; also sizes the loading skeleton. */
     height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to 500; also sizes the loading skeleton. */
     width?: number | string;
+    /** Wedge colours in order. Defaults to the theme's categorical palette. */
     chartColors?: string[];
+    /** Horizontal alignment of the title. Defaults to "center". */
     titlePosition?: "left" | "center" | "right";
+    /** Title colour and font; defaults to 14px, weight 600 and the theme's text ink. */
     titleStyle?: {
         color?: string;
         fontSize?: string;
         fontWeight?: number | string;
         fontFamily?: string;
     };
+    /** Legend overrides: label colours, series-coloured labels and position. Defaults to the text ink at the bottom. */
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;

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

@@ -2,15 +2,25 @@
 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 = {
+    /** Defaults to "gauge"; see RadialChartVariant. */
     variant?: RadialChartVariant;
+    /** One value per ring as a percentage (0-100); the centre label shows it as a rounded percent. */
     data: number[];
+    /** Ring names, one per `data` value; shown in the gauge centre and in the "multi" legend. */
     labels?: string[];
+    /** Heading above the chart, aligned by `titlePosition`. */
     title?: string;
+    /** Horizontal alignment of the title. Defaults to "left". */
     titlePosition?: "left" | "center" | "right";
+    /** Chart height as a px number or CSS string. Defaults to 320; also sizes the loading skeleton. */
     height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to "100%"; also sizes the loading skeleton. */
     width?: number | string;
+    /** Ring colours in order. Defaults to the theme's categorical palette. */
     colors?: string[];
+    /** Caption for the centre average in the "multi" variant. Defaults to "Total". */
     totalLabel?: string;
+    /** Colour of the unfilled ring track. Defaults to the theme's quaternary background. */
     trackColor?: string;
     /** Ignored when `variant="multi"` — the ring width is hardcoded to `"52%"` in that variant. */
     hollowSize?: string;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { type AppSwitcherProps } from "./AppSwitcherProps";
+/** Top-bar grid button that opens a panel of suite apps to jump between, with optional search and keyboard shortcut. */
 declare const AppSwitcher: React.FC<AppSwitcherProps>;
 export default AppSwitcher;

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -79,6 +79,7 @@ const validate = (apps) => {
 };
 // Flip back to true to restore `searchThreshold` opening the field on its own.
 const SEARCH_OPENS_BY_COUNT = false;
+/** Top-bar grid button that opens a panel of suite apps to jump between, with optional search and keyboard shortcut. */
 const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable, searchThreshold = 8, shortcut = null, showShortcutHint = true, hideWhenAlone = true, emptyMessage = "No app matches that name.", footer, ariaLabel = "Switch app", panelWidth, maxHeight = "24rem", isLoading = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();

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

@@ -8,41 +8,60 @@ export type AppIconComponent = ComponentType<{
 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 {
+    /** Stable identity: matches `currentAppId`, keys the row, and seeds the mark's auto-assigned colour. */
     id: string;
+    /** Row label; also searched, matched by type-ahead, and the source of the initials when there is no icon. */
     name: string;
+    /** Destination opened in a new tab (noopener); can be omitted only when `locked`. */
     url: string;
+    /** Second line under the name, truncated to one line and included in search. */
     description?: string;
+    /** Mark glyph: a lucide-style component or a ready node; falls back to initials. Ignored when `iconUrl` is set. */
     icon?: AppIcon;
+    /** Image URL drawn as the mark instead of the tinted glyph tile; takes precedence over `icon` and `color`. */
     iconUrl?: string;
+    /** Mark hue; when omitted a distinct hue is auto-assigned from the chart palette. */
     color?: string;
+    /** Small info-coloured text beside the name (e.g. "New"); hidden on the current app. */
     badge?: string | number;
     /** Listed but not openable — renders locked with `lockedReason` as its title. */
     locked?: boolean;
+    /** Tooltip for a locked row; defaults to "<name> is not available on your plan". */
     lockedReason?: string;
     /** Extra terms the search should match, e.g. "helpdesk" for Tickets. */
     keywords?: string[];
 }
 /** Fixed top-bar control: two columns, md density, bottom-end anchor, "Your apps", new tab. */
 export interface AppSwitcherProps {
+    /** Apps to list, in display order, laid out in two columns. */
     apps: AppOption[];
     /** id of the app this UI is running inside. Its row is marked and never navigates. */
     currentAppId?: string;
     /** 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;
+    /** Fires with the new open state whenever the panel opens or closes (trigger, shortcut, selection, Escape, outside click). */
     onOpenChange?: (isOpen: boolean) => void;
     /** The only thing that shows the search box — searchThreshold below is currently inert (kept for API compat). */
     isSearchable?: boolean;
+    /** Currently inert: the app count no longer opens search; use `isSearchable`. Kept for API compatibility. */
     searchThreshold?: number;
     /** Keyboard shortcut that opens the panel, e.g. "mod+shift+a". `null` disables it. */
     shortcut?: string | null;
+    /** Shows the `shortcut` chord as a key hint in the panel header; default true, no effect without `shortcut`. */
     showShortcutHint?: boolean;
     /** Renders nothing when there is no other app to switch to. */
     hideWhenAlone?: boolean;
+    /** Text shown when a search matches no app; default "No app matches that name." */
     emptyMessage?: string;
+    /** Content rendered in a bordered strip below the app grid. */
     footer?: ReactNode;
+    /** Accessible name of the trigger button; default "Switch app". */
     ariaLabel?: string;
+    /** CSS width of the panel; default "28rem", capped to the viewport width. */
     panelWidth?: string;
+    /** CSS max-height of the scrollable app grid; default "24rem". */
     maxHeight?: string;
+    /** Shows four skeleton rows instead of the apps and the empty message; default false. */
     isLoading?: boolean;
 }
 /** Up to two initials, so a mark stays legible without an icon. */
@@ -57,12 +76,16 @@ export declare const shortcutKeys: (shortcut: string, isApple?: boolean) => stri
 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"> {
+    /** Hostname label substituted for `baseSubdomain` to derive this app's origin. */
     subdomain: string;
+    /** Explicit origin or URL for this app; wins over derivation and is trimmed. */
     url?: string;
 }
 /** The consumer's own absolute origin, plus which hostname label identifies it — `buildSuiteApps` swaps that label per app. */
 export interface SuiteUrlOptions {
+    /** Absolute URL of the host the consumer is served on; throws if it is not absolute. */
     baseUrl: string;
+    /** Label in `baseUrl`'s hostname that identifies this app (e.g. "crm") and is swapped per app. */
     baseSubdomain: string;
     /** Opt-in for hosts with no `baseSubdomain` label (plain `localhost`): other apps derive from this labelled URL instead of throwing, and the app owning `baseSubdomain` keeps `baseUrl`. */
     devFallbackBaseUrl?: string;

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

@@ -3,6 +3,7 @@ import { type AppOption, type SuiteAppSource, type SuiteUrlOptions } from "./App
 export type SuiteAppId = "crm" | "account" | "tickets" | "billing" | "hrms" | "social";
 /** One catalogue entry: switcher copy plus whether the app is hidden from production lists. */
 export interface PixelizeSuiteApp extends SuiteAppSource {
+    /** Narrows `AppOption.id` to a known suite app id. */
     id: SuiteAppId;
     /** Hidden from production lists (except as the current app) until a deployment overrides it to false. */
     preRelease?: boolean;

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

@@ -1,3 +1,4 @@
 import type { AppearanceSettingsProps } from "./AppearanceSettingsProps";
+/** Settings panel with brand, light/dark mode and root font-size pickers; each section can be hidden. */
 export declare const AppearanceSettings: ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand, showColorMode, showFontSize, size, labels, }: AppearanceSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export default AppearanceSettings;

package/dist/Components/AppearanceSettings/AppearanceSettings.js

@@ -19,6 +19,7 @@ const FieldLabel = ({ children }) => {
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, color: colors.textMuted, mb: 2, children: children }));
 };
 const brandSwatch = (name, colors) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "14px", h: "14px", borderRadius: "full", bg: brands_1.lightPalettes[name].primary[500], border: "1px solid", borderColor: (0, outlineRung_1.ruleInk)(colors.boxborder[200], [colors.backgroundColor.light, colors.backgroundColor.tertiary], outlineRung_1.CHROME_RULE) }));
+/** Settings panel with brand, light/dark mode and root font-size pickers; each section can be hidden. */
 const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
     var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

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

@@ -1,19 +1,30 @@
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 /** i18n overrides for this panel's field labels; any key left out keeps the library's English default. */
 export type AppearanceSettingsLabels = {
+    /** Label above the brand picker; default "Theme". */
     theme?: string;
+    /** Label above the light/dark/system switch; default "Color mode". */
     colorMode?: string;
+    /** Label above the font-size picker; default "Font Size". */
     fontSize?: string;
 };
 /** Controlled brand/font-size pickers; the color-mode switch is uncontrolled and reads/writes theme context directly. */
 export type AppearanceSettingsProps = {
+    /** Currently selected brand name (a key of the theme list, e.g. "zinc"); the picker is controlled. */
     brand?: string;
+    /** Currently selected root font size as a percentage id from "80%" to "130%" ("100%" is default); the picker is controlled. */
     fontSize?: string;
+    /** Called with the chosen brand name; the caller must apply the theme and pass it back via `brand`. */
     onBrandChange?: (brand: string) => void;
+    /** Called with the chosen percentage id; the caller must apply it and pass it back via `fontSize`. */
     onFontSizeChange?: (fontSize: string) => void;
+    /** Shows the brand picker; default true. */
     showBrand?: boolean;
+    /** Shows the light/dark/system switch, which reads and writes the theme provider directly; default true. */
     showColorMode?: boolean;
+    /** Shows the font-size picker; default true. */
     showFontSize?: boolean;
+    /** Control size shared by all three controls; default "sm". */
     size?: Extract<ControlSize, "sm" | "md" | "lg">;
     /** Pass translated strings; the library ships English defaults. */
     labels?: AppearanceSettingsLabels;

package/dist/Components/AudioRecorder/AudioRecorder.d.ts

@@ -4,5 +4,6 @@ export declare const recordingFileName: (mime: string, now: number) => {
     type: string;
     name: string;
 };
+/** Microphone recorder: a toggle button and timer that hands a `File` to `onRecorded` on stop. */
 declare const AudioRecorder: ({ onRecorded, maxDurationSec, isDisabled, labels }: AudioRecorderProps) => import("react/jsx-runtime").JSX.Element;
 export default AudioRecorder;

package/dist/Components/AudioRecorder/AudioRecorder.js

@@ -41,6 +41,7 @@ const recordingFileName = (mime, now) => {
 };
 exports.recordingFileName = recordingFileName;
 const isSupported = () => { var _a; return typeof navigator !== "undefined" && !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia) && typeof MediaRecorder !== "undefined"; };
+/** Microphone recorder: a toggle button and timer that hands a `File` to `onRecorded` on stop. */
 const AudioRecorder = ({ onRecorded, maxDurationSec, isDisabled = false, labels }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const text = { ...DEFAULT_LABELS, ...labels };

package/dist/Components/AudioRecorder/AudioRecorderProps.d.ts

@@ -1,11 +1,16 @@
 /** Visible text and announcements; every key falls back to English. */
 export type AudioRecorderLabels = {
+    /** Start button text. */
     start: string;
+    /** Stop button text, shown while recording. */
     stop: string;
+    /** Announced to screen readers when recording begins. */
     recording: string;
     /** Announced when a recording finishes, followed by its duration. */
     recorded: string;
+    /** Alert text when the browser refuses microphone access. */
     permissionDenied: string;
+    /** Alert text when there is no microphone or MediaRecorder support; Start is disabled. */
     unsupported: string;
 };
 /** Props for the microphone recorder: one toggle button, a timer, and a `File` on stop. */
@@ -16,5 +21,6 @@ export interface AudioRecorderProps {
     maxDurationSec?: number;
     /** Blocks Start only; a recording already in progress can always be stopped. */
     isDisabled?: boolean;
+    /** Overrides the default English strings; unset keys keep their default. */
     labels?: Partial<AudioRecorderLabels>;
 }

package/dist/Components/Avatar/AvatarGroup.d.ts

@@ -1,3 +1,4 @@
 import type { AvatarGroupProps } from "./AvatarGroupProps";
+/** Overlapping avatar stack; people past `max` collapse into a "+N" chip. */
 declare const AvatarGroup: ({ people, max, size, ariaLabel, "data-testid": testId }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default AvatarGroup;

package/dist/Components/Avatar/AvatarGroup.js

@@ -13,6 +13,7 @@ const summarize = (names, overflow) => {
         return names.join(", ");
     return `${names.join(", ")} and ${overflow} more`;
 };
+/** Overlapping avatar stack; people past `max` collapse into a "+N" chip. */
 const AvatarGroup = ({ people, max = 4, size = "md", ariaLabel, "data-testid": testId }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const shown = people.slice(0, max);

package/dist/Components/Avatar/AvatarGroupProps.d.ts

@@ -1,7 +1,9 @@
 import type { AvatarSize } from "./AvatarProps";
 /** One member of an AvatarGroup stack. */
 export type AvatarGroupMember = {
+    /** Drives the avatar's initials and fill colour, and appears in the group's default `aria-label`. */
     name: string;
+    /** Image URL. Falls back to initials when missing or when the image fails to load. */
     src?: string;
 };
 /** Overlapping stack of Avatars with a "+N" overflow chip past `max`. */