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

package/dist/Components/Header/HeaderActions.d.ts

@@ -1,27 +1,43 @@
 import { OptionProp } from "../Select/SelectProps";
+/** Row of optional header controls (select, edit, create) separated by dividers; each renders only when its flag is set. */
 declare const HeaderActions: ({ select, edit, create, surface, }: {
     /** Background this is drawn on. Header's bar is dark in BOTH modes — pass it there. */
     surface?: string;
+    /** Optional select shown at the start of the row. */
     select?: {
+        /** Renders the select only when true. */
         isSelect?: boolean;
+        /** Options of the select; empty when omitted. */
         options?: OptionProp[];
+        /** Called with the chosen option. */
         onSelectChange?: (option?: OptionProp) => void;
+        /** Placeholder of the select; also its accessible name when `ariaLabel` is not set. */
         selectPlaceholderText?: string;
         /** Accessible name for the select; defaults to the placeholder text. */
         ariaLabel?: string;
         /** False renders the themed popup, which looks identical on Windows and macOS; a native select's list is OS-drawn. */
         native?: boolean;
+        /** CSS width of the select wrapper; defaults to "12.5rem". */
         width?: string;
+        /** Value of the selected option. */
         value?: string;
     };
+    /** Optional text button with a pencil icon. */
     edit?: {
+        /** Renders the button only when true. */
         isEditable?: boolean;
+        /** Called when the button is pressed. */
         onEdit?: () => void;
+        /** Button text; defaults to "Edit Layout". */
         label?: string;
     };
+    /** Optional text button with a plus icon. */
     create?: {
+        /** Renders the button only when true. */
         isCreatable?: boolean;
+        /** Called when the button is pressed. */
         onCreate?: () => void;
+        /** Button text; defaults to "Create New". */
         label?: string;
     };
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Header/HeaderActions.js

@@ -13,6 +13,7 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const Select_1 = __importDefault(require("../Select/Select"));
 const Divider_1 = __importDefault(require("../Divider/Divider"));
 const surfaceFocusRing_1 = require("../Common/surfaceFocusRing");
+/** Row of optional header controls (select, edit, create) separated by dividers; each renders only when its flag is set. */
 const HeaderActions = ({ select, edit, create, surface, }) => {
     var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/Header/HeaderProps.d.ts

@@ -1,23 +1,29 @@
 /** Horizontal top bar with page-link nav + submenus — for a user-avatar dropdown bar instead, use NavigationBar. */
 type SubItem = {
+    /** Dropdown entry text; also its React key, so keep it unique within the parent. */
     label: string;
     /** Only compared with Header's `active` to highlight — never navigates; route in `onClick`. */
     href: string;
     /** Small badge above the label; colorScheme defaults to "blue". */
     badge?: {
+        /** Badge text. */
         label: string;
+        /** Chakra colour scheme of the badge; the tint is resolved against the bar background. */
         colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
     };
     /** Also closes the mobile menu when tapped there. */
     onClick?: () => void;
 };
 type MenuItemProp = {
+    /** Top-level entry text; also its React key and what the hover dropdown is keyed on, so keep it unique. */
     label: string;
     /** Only compared with Header's `active` to highlight — never navigates; route in `onClick`. */
     href?: string;
     /** Small badge above the label; colorScheme defaults to "blue". */
     badge?: {
+        /** Badge text. */
         label: string;
+        /** Chakra colour scheme of the badge; the tint is resolved against the bar background. */
         colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
     };
     /** Also closes the mobile menu; with `children`, fires on desktop only — mobile tap just toggles. */
@@ -27,7 +33,9 @@ type MenuItemProp = {
 };
 /** Props for Header, the horizontal top bar; use NavigationBar for a user-avatar dropdown instead. */
 export type HeaderProps = {
+    /** Brand mark at the left of the bar; any click handling is yours to attach. */
     logo: React.ReactNode;
+    /** Top-level entries in order; an entry with `children` becomes a dropdown (desktop) or accordion (mobile). */
     menuItems: MenuItemProp[];
     /** Mounted once, in the bar; a valid element also receives a `closeMobileMenu` prop. */
     rightSlot?: React.ReactNode;
@@ -35,10 +43,15 @@ export type HeaderProps = {
     active?: string;
     /** Overrides the sidebar-token defaults; `active` is the underline/highlight colour, not text. */
     colors?: {
+        /** Bar background. */
         bg: string;
+        /** Default text and icon colour. */
         color: string;
+        /** Underline on the active top-level item and fill behind the active sub-item. */
         active: string;
+        /** Background of an item under the pointer. */
         hover: string;
+        /** Text colour of an item under the pointer; defaults to white. */
         hoverTextColor?: string;
     };
     /** Overrides the default "md" shadow. */
@@ -48,19 +61,28 @@ export type HeaderProps = {
 };
 /** Internal props for Header's desktop nav row; not meant for consumers. */
 export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
+    /** Called with the hovered item's label, or null on pointer leave; only items with children trigger it. */
     setHoveredMenu: (menu: string | null) => void;
+    /** True when an `href` matches Header's `active`. */
     isActive: (href?: string) => boolean | "" | undefined;
+    /** Underline or fill colour of the active item. */
     activeBg: string;
+    /** Label of the item whose dropdown is open, or null. */
     hoveredMenu: string | null;
+    /** Background of an item under the pointer. */
     hoverBg: string;
+    /** Default text colour. */
     color: string;
+    /** Text colour of an item under the pointer. */
     hoverTextColor?: string;
     /** The bar's own background — badges resolve their tint against this, never the light canvas default. */
     surface: string;
 };
 /** Internal props for Header's collapsible mobile menu panel; not meant for consumers. */
 export type MobileMenuProps = Pick<HeaderProps, 'menuItems'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg' | 'surface'> & {
+    /** Expands the panel; collapsing it also closes any open submenu. */
     isOpen: boolean;
+    /** Called after a leaf item is tapped, so the host can collapse the panel. */
     onClose?: () => void;
 };
 export {};

package/dist/Components/Header/components/desktopMenu.d.ts

@@ -1,3 +1,4 @@
 import { DesktopMenuProps } from "../HeaderProps";
+/** Desktop nav row of Header: ghost buttons with hover dropdowns for items that have children. */
 declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor, surface, }: DesktopMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DesktopMenu;

package/dist/Components/Header/components/desktopMenu.js

@@ -7,6 +7,7 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const tone_1 = require("../../../Theme/tokens/builders/tone");
 const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+/** Desktop nav row of Header: ghost buttons with hover dropdowns for items that have children. */
 const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor, surface, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const badgeTone = (scheme) => (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);

package/dist/Components/Header/components/mobileMenu.d.ts

@@ -1,3 +1,4 @@
 import { MobileMenuProps } from "../HeaderProps";
+/** Collapsible mobile nav panel of Header; items with children toggle an inline submenu. */
 declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, surface, onClose, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MobileMenu;

package/dist/Components/Header/components/mobileMenu.js

@@ -11,6 +11,7 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const tone_1 = require("../../../Theme/tokens/builders/tone");
 const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+/** Collapsible mobile nav panel of Header; items with children toggle an inline submenu. */
 const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, surface, onClose, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const badgeTone = (scheme) => (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.d.ts

@@ -1,5 +1,5 @@
 import { OptionProp } from "../../Select/SelectProps";
-/** Standalone filter+Edit+Create action bar; NOT rendered by KanbanBoard (which uses HeaderActions instead) and not exported from the package. */
+/** Standalone filter+Edit+Create bar, exported from the package; KanbanBoard itself uses HeaderActions. */
 declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate, }: {
     options: OptionProp[];
     onSelectChange?: (option?: OptionProp) => void;

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -10,7 +10,7 @@ const lucide_react_1 = require("lucide-react");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../../Button/Button"));
-/** Standalone filter+Edit+Create action bar; NOT rendered by KanbanBoard (which uses HeaderActions instead) and not exported from the package. */
+/** Standalone filter+Edit+Create bar, exported from the package; KanbanBoard itself uses HeaderActions. */
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { native: false, options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -18,16 +18,20 @@ export type Account = {
 };
 /** One Kanban column: id, title, accent color, and its `Account` items. */
 export type ColumnType = {
+    /** Not read by the board; the key in the `data` record is the column's identity for drag and callbacks. */
     id: string;
+    /** Column header text; also used in the reorder-handle and delete-all aria-labels. */
     title: string;
     /** Falls back to `colors.primary[500]` when omitted — used for the accent dot/border. */
     color: string;
+    /** Cards in display order; a drag reorders them in the board's internal state. */
     items: Account[];
     /** Column-level slot (e.g. totals); shown below the title expanded, and rotated in the collapsed rail. */
     customNode?: () => ReactNode;
 };
 /** Fired after a column rail is collapsed or expanded via the board UI. */
 export type ColumnCollapseChangePayload = {
+    /** Key of the toggled column in the `data` record. */
     colId: string;
     /** True when the column is in the narrow collapsed rail. */
     collapsed: boolean;
@@ -36,11 +40,17 @@ export type ColumnCollapseChangePayload = {
 };
 /** Payload of `onDrag` — the moved card, its source/target column ids and indexes, and the next column map. */
 export type KanbanDragPayload = {
+    /** Source column id (its key in the `data` record). */
     from: string;
+    /** Destination column id; equals `from` when reordered within one column. */
     to: string;
+    /** The dragged card. */
     item: Account;
+    /** Next column map with the move already applied, keyed by column id. */
     columns: Record<string, ColumnType>;
+    /** Zero-based index of the card in the source column before the move. */
     fromIndex: number;
+    /** Zero-based index of the card in the destination column after the move. */
     toIndex: number;
 };
 /** Board permission gates; every flag defaults to true when omitted. */
@@ -109,6 +119,7 @@ export type KanbanBoardProps = {
     };
     /** Renders cards via a virtualized react-window list; omitted, it auto-enables above 30 cards in that column — true/false always overrides. */
     virtualization?: boolean;
+    /** Gates edit, create, delete and view actions; each flag defaults to true when omitted. */
     permissions?: KanbanPermissions;
     /** Per-column empty state for columns with no items. */
     noItems?: {

package/dist/Components/Kbd/Kbd.d.ts

@@ -2,5 +2,6 @@ import type { KbdProps, KbdShortcutProps } from "./KbdProps";
 export declare const detectApple: () => boolean;
 /** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
 declare const Kbd: ({ children, size, "data-testid": testId }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+/** Renders a chord such as `mod+k` as one `Kbd` per key, announced as a single spoken label. */
 export declare const KbdShortcut: ({ shortcut, size, isApple, "data-testid": testId }: KbdShortcutProps) => import("react/jsx-runtime").JSX.Element;
 export default Kbd;

package/dist/Components/Kbd/Kbd.js

@@ -22,6 +22,7 @@ const Kbd = ({ children, size = "sm", "data-testid": testId }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "data-testid": testId, display: "inline-flex", alignItems: "center", justifyContent: "center", minW: HEIGHT[size], h: HEIGHT[size], px: 1.5, fontFamily: "inherit", fontSize: "xs-minus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
 };
+/** Renders a chord such as `mod+k` as one `Kbd` per key, announced as a single spoken label. */
 const KbdShortcut = ({ shortcut, size, isApple, "data-testid": testId }) => {
     const parts = shortcut.split("+").map((p) => p.trim()).filter(Boolean);
     const apple = isApple !== null && isApple !== void 0 ? isApple : (0, exports.detectApple)();

package/dist/Components/Kbd/KbdProps.d.ts

@@ -1,17 +1,21 @@
 import type { ReactNode } from "react";
 /** Props for a single keyboard key cap. */
 export interface KbdProps {
+    /** Key glyph or word shown on the cap. */
     children: ReactNode;
     /** `sm` is 20px tall (default); `xs` is 16px. */
     size?: "xs" | "sm";
+    /** Test id on the `<kbd>` element. */
     "data-testid"?: string;
 }
 /** Props for a key chord such as `mod+k`, rendered as one `Kbd` per key. */
 export interface KbdShortcutProps {
     /** Chord in `AppSwitcher` notation, e.g. `mod+shift+k`. */
     shortcut: string;
+    /** Cap size of every key; same scale as `Kbd`. */
     size?: KbdProps["size"];
     /** Forces Apple glyphs (⌘ ⇧) or Ctrl/Shift words; defaults to platform detection. */
     isApple?: boolean;
+    /** Test id on the wrapper that carries the spoken chord label. */
     "data-testid"?: string;
 }

package/dist/Components/LauncherTrigger/LauncherTrigger.d.ts

@@ -1,4 +1,5 @@
 import type { LauncherTriggerProps } from "./LauncherTriggerProps";
 export declare const keyShortcutsFor: (shortcut: string) => string;
+/** Chip or icon button that opens an app-owned launcher; shows the shortcut hint but binds no key. */
 declare const LauncherTrigger: ({ onClick, isOpen, label, shortcut, icon: Icon, display, "aria-label": ariaLabel, "data-testid": testId, }: LauncherTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTrigger.js

@@ -35,6 +35,7 @@ const keyShortcutsFor = (shortcut) => {
     return Array.from(new Set(chords)).join(" ");
 };
 exports.keyShortcutsFor = keyShortcutsFor;
+/** Chip or icon button that opens an app-owned launcher; shows the shortcut hint but binds no key. */
 const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = lucide_react_1.Compass, display = "chip", "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const showHint = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);

package/dist/Components/LauncherTrigger/LauncherTriggerProps.d.ts

@@ -1,6 +1,7 @@
 import type { ElementType } from "react";
 /** Props for the chip that opens an app-owned launcher; it renders the trigger only and binds no shortcut. */
 export interface LauncherTriggerProps {
+    /** Fires when the trigger is activated; toggle your launcher's open state here. */
     onClick: () => void;
     /** Whether the launcher is open; drives `aria-expanded`. */
     isOpen: boolean;

package/dist/Components/LimitReachedModal/LimitReachedModal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { LimitReachedModalProps } from "./LimitReachedModalProps";
+/** Controlled plan-limit modal: kind-specific title and message, optional usage line and feature list, upgrade CTA only for billing managers. */
 declare const LimitReachedModal: React.FC<LimitReachedModalProps>;
 export default LimitReachedModal;

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -19,6 +19,7 @@ const KIND_ICON = {
     projects: lucide_react_1.Crown,
     tickets: lucide_react_1.Crown,
 };
+/** Controlled plan-limit modal: kind-specific title and message, optional usage line and feature list, upgrade CTA only for billing managers. */
 const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, canManageBilling, onUpgrade, title, message, features, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const copy = (0, limitReachedCopy_1.resolveLimitCopy)(kind, canManageBilling);

package/dist/Components/LimitReachedModal/LimitReachedModalProps.d.ts

@@ -2,17 +2,24 @@
 export type LimitKind = "record" | "automation" | "custom_modules" | "user" | "projects" | "tickets";
 /** Fully controlled (isOpen/onClose only, no internal useDisclosure/autoOpen); closed prop list — modal size is fixed at "lg", not configurable. */
 export interface LimitReachedModalProps {
+    /** Controlled visibility; the modal renders nothing while false. */
     isOpen: boolean;
+    /** Called by the X button, Esc, overlay click and the Maybe later or Close button. */
     onClose: () => void;
+    /** Picks the icon, default title and default message; `user` gets a users icon, the rest a crown. */
     kind: LimitKind;
     /** Inline usage line needs BOTH limit and used — either alone silently renders nothing. */
     limit?: number | null;
+    /** Amount already consumed; shown with `limit` as "X of Y <unit> used". */
     used?: number | null;
     /** false hides the upgrade CTA and swaps in "contact your administrator" copy. */
     canManageBilling: boolean;
     /** Clicking the CTA calls only this — it does not also call onClose. Close the modal yourself if upgrading should dismiss it. */
     onUpgrade?: () => void;
+    /** Overrides the kind's default heading. */
     title?: string;
+    /** Overrides the default body text, which also differs by `canManageBilling`. */
     message?: string;
+    /** Optional check-marked bullets listed under the message, e.g. what the next plan unlocks. */
     features?: string[];
 }

package/dist/Components/Loading/LoadingProps.d.ts

@@ -1,6 +1,8 @@
 /** Props for Loading, a full-viewport (or container-scoped) blocking overlay gated on `isLoading`. */
 export type LoadingProps = {
+    /** Label under the spinner; without it the spinner is named "Loading". With `onlytext` it is the heading. */
     text?: string;
+    /** Shows the overlay; renders nothing when false. */
     isLoading: boolean;
     /** Swaps the spinner+label for a large pulsing 50px uppercase heading — a different treatment, not just "no spinner". */
     onlytext?: boolean;

package/dist/Components/MediaGallery/MediaGalleryProps.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import type { ProductMedia } from "../Commerce/commerceTypes";
 import type { MediaLightboxLabels } from "./MediaLightboxProps";
-/** `auto` picks `thumbs-left` from 768px up and `swipe` below it. */
+/** `auto` picks `thumbs-left` when the gallery is at least 560px wide (viewport 768px until measured) and `swipe` below that. */
 export type MediaGalleryLayout = "auto" | "thumbs-left" | "thumbs-below" | "swipe";
 /** `lightbox` opens the full-screen viewer, `inner` zooms in place, `none` is inert. */
 export type MediaGalleryZoom = "lightbox" | "inner" | "none";
@@ -17,7 +17,9 @@ export interface MediaGalleryLabels {
     image: (position: number, total: number) => string;
     /** Accessible name of a thumbnail or dot; `alt` is the frame's own description when it has one. */
     frame: (position: number, total: number, alt?: string) => string;
+    /** Accessible name of the previous-frame arrow. */
     previous: string;
+    /** Accessible name of the next-frame arrow. */
     next: string;
     /** Accessible name of the dots group. */
     dots: string;
@@ -31,8 +33,11 @@ export interface MediaGalleryLabels {
     openLightbox: (position: number, total: number) => string;
     /** Name of the button that toggles in-place zoom on an image. */
     zoomImage: (position: number, total: number) => string;
+    /** Accessible name of the play button over a video frame. */
     playVideo: string;
+    /** Shown in place of an image that fails to load. */
     imageUnavailable: string;
+    /** Accessible name of the skeleton shown while `isLoading`. */
     loading: string;
 }
 export declare const defaultMediaGalleryLabels: MediaGalleryLabels;
@@ -72,5 +77,6 @@ export interface MediaGalleryProps {
     lightboxLabels?: Partial<MediaLightboxLabels>;
     /** Replaces `labels.region` as the carousel's accessible name, e.g. the product title. */
     "aria-label"?: string;
+    /** Test id on the gallery's root element. */
     "data-testid"?: string;
 }

package/dist/Components/MediaGallery/MediaLightboxProps.d.ts

@@ -4,8 +4,11 @@ import type { ProductMedia } from "../Commerce/commerceTypes";
 export interface MediaLightboxLabels {
     /** Accessible name of the dialog. */
     dialog: string;
+    /** Accessible name of the close button. */
     close: string;
+    /** Accessible name of the previous-frame arrow. */
     previous: string;
+    /** Accessible name of the next-frame arrow. */
     next: string;
     /** Visible and live-announced counter, "2 / 5". */
     counter: (position: number, total: number) => string;
@@ -15,7 +18,9 @@ export interface MediaLightboxLabels {
     frame: (position: number, total: number, alt?: string) => string;
     /** Alt text for a frame that has no `alt` of its own. */
     image: (position: number, total: number) => string;
+    /** Accessible name of the play button over a video frame. */
     playVideo: string;
+    /** Shown in place of an image that fails to load. */
     imageUnavailable: string;
 }
 export declare const defaultMediaLightboxLabels: MediaLightboxLabels;

package/dist/Components/MediaViewer/components/MediaAudioPlayer.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { type MediaAudioPlayerProps } from "./MediaAudioPlayerProps";
+/** Audio stage of MediaViewer: play/pause, seek, volume and playback-speed controls with J / L skip keys. */
 declare const MediaAudioPlayer: React.FC<MediaAudioPlayerProps>;
 export default MediaAudioPlayer;

package/dist/Components/MediaViewer/components/MediaAudioPlayer.js

@@ -19,6 +19,7 @@ const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const VOLUME_WIDTH_TRANSITION = (0, motion_1.transitionFor)(["width"], "base", "out");
 const ARROW_SEEK_SECONDS = 5;
 const ARROW_VOLUME_STEP = 0.1;
+/** Audio stage of MediaViewer: play/pause, seek, volume and playback-speed controls with J / L skip keys. */
 const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides }) => {
     const labels = { ...MediaAudioPlayerProps_1.defaultMediaAudioPlayerLabels, ...labelOverrides };
     const chrome = (0, useViewerChrome_1.useViewerChrome)();

package/dist/Components/MediaViewer/components/MediaDocumentStage.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { type MediaDocumentStageProps } from "./MediaDocumentStageProps";
+/** Document stage of MediaViewer: previews PDF, DOCX and text files inline, other kinds get a download panel; loading and error states come from `resolveDocument`. */
 export declare const MediaDocumentStage: React.FC<MediaDocumentStageProps>;
 export default MediaDocumentStage;

package/dist/Components/MediaViewer/components/MediaDocumentStage.js

@@ -116,6 +116,7 @@ function TextStage({ itemKey, url, blob, label, labels }) {
     }
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, overflow: "auto", px: { base: 3, md: 8 }, py: 4, "data-testid": "media-text", children: (0, jsx_runtime_1.jsx)(react_2.Text, { as: "pre", fontFamily: "mono", fontSize: "sm", whiteSpace: "pre-wrap", wordBreak: "break-word", color: chrome.ink, children: state.text }) }));
 }
+/** Document stage of MediaViewer: previews PDF, DOCX and text files inline, other kinds get a download panel; loading and error states come from `resolveDocument`. */
 const MediaDocumentStage = ({ item, label, resolveDocument, labels: labelOverrides, }) => {
     const labels = { ...MediaDocumentStageProps_1.defaultMediaDocumentStageLabels, ...labelOverrides };
     const chrome = (0, useViewerChrome_1.useViewerChrome)();

package/dist/Components/MediaViewer/components/MediaImageViewer.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { type MediaImageViewerProps } from "./MediaImageViewerProps";
+/** Image stage of MediaViewer with zoom, drag-to-pan, rotation and keyboard shortcuts. */
 declare const MediaImageViewer: React.FC<MediaImageViewerProps>;
 export default MediaImageViewer;

package/dist/Components/MediaViewer/components/MediaImageViewer.js

@@ -18,6 +18,7 @@ const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const TRANSFORM_OUT_TRANSITION = (0, motion_1.transitionFor)(["transform"], "fast", "out");
 const ORIGIN = { x: 0, y: 0 };
 const transformFor = (pan, zoom, rotation) => `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100}) rotate(${rotation}deg)`;
+/** Image stage of MediaViewer with zoom, drag-to-pan, rotation and keyboard shortcuts. */
 const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: labelOverrides, }) => {
     const labels = { ...MediaImageViewerProps_1.defaultMediaImageViewerLabels, ...labelOverrides };
     const chrome = (0, useViewerChrome_1.useViewerChrome)();

package/dist/Components/MediaViewer/components/MediaVideoPlayer.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { type MediaVideoPlayerProps } from "./MediaVideoPlayerProps";
+/** Video stage of MediaViewer: transport, seek, volume, speed and fullscreen controls with keyboard shortcuts and double-tap skip. */
 declare const MediaVideoPlayer: React.FC<MediaVideoPlayerProps>;
 export default MediaVideoPlayer;

package/dist/Components/MediaViewer/components/MediaVideoPlayer.js

@@ -29,6 +29,7 @@ const ARROW_VOLUME_STEP = 0.1;
 const spin = (0, react_3.keyframes) `from { transform: rotate(0deg); } to { transform: rotate(360deg); }`;
 const rippleFade = (0, react_3.keyframes) `0% { opacity: 0.9; } 100% { opacity: 0; }`;
 const seekIcon = (icon) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: "2px", "aria-hidden": true, children: [icon, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", fontWeight: 600, children: mediaItems_1.SEEK_STEP_SECONDS })] }));
+/** Video stage of MediaViewer: transport, seek, volume, speed and fullscreen controls with keyboard shortcuts and double-tap skip. */
 const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, labels: labelOverrides, }) => {
     const labels = { ...MediaVideoPlayerProps_1.defaultMediaVideoPlayerLabels, ...labelOverrides };
     const chrome = (0, useViewerChrome_1.useViewerChrome)();

package/dist/Components/MediaViewer/components/MediaVideoPlayerProps.d.ts

@@ -51,6 +51,7 @@ export interface MediaVideoPlayerLabels {
     unsupportedFormatHint: string;
     /** Screen-reader announcement for a double-click/tap skip, distinct from the visible ripple. */
     skipBack: (seconds: number) => string;
+    /** Screen-reader announcement for a double-click/tap skip forward; counterpart of `skipBack`. */
     skipForward: (seconds: number) => string;
 }
 export declare const defaultMediaVideoPlayerLabels: MediaVideoPlayerLabels;

package/dist/Components/MediaViewer/hooks/useFileViewer.d.ts

@@ -10,6 +10,7 @@ export interface FileViewerApi {
     openItems: (items: MediaItem[], index: number, title: string) => void;
     /** Opens local, unsaved `File`s via object URLs; the hook owns their lifecycle. */
     openLocal: (files: File[], index: number, title: string) => void;
+    /** Closes the viewer and revokes the object URLs made for local files. */
     close: () => void;
     /** Mount this once; it renders nothing until `open`/`openItems`/`openLocal` is called. */
     viewer: ReactNode;

package/dist/Components/MediaViewer/mediaItems.d.ts

@@ -1,42 +1,67 @@
 export type MediaKind = "image" | "video" | "audio" | "youtube" | "pdf" | "doc" | "text" | "spreadsheet" | "presentation" | "archive" | "file";
 export interface MediaItem {
+    /** Unique id of the item, used as the React key and for tile selection. */
     key: string;
+    /** Chooses the viewer: image, video, audio, YouTube embed or a document stage. */
     kind: MediaKind;
+    /** Fetchable url; for `youtube` it is the video id instead. */
     src: string;
+    /** Thumbnail url for the tile strip; null shows a kind icon instead. */
     thumb: string | null;
+    /** 1-based position within the item's kind, used in tile names such as "image 2". */
     ordinal: number;
+    /** Date string shown as the uploaded date in the details line. */
     uploadedAt?: string | null;
+    /** Size in bytes, shown beside the file type in the details line. */
     fileSize?: number | null;
+    /** Accessible name of the player or stage for this item; falls back to the viewer `title`. */
     name?: string | null;
 }
 export interface MediaFile {
+    /** Stored path passed to `resolveUrl`; an absolute blob:, data: or http(s): url is used as is. */
     path: string;
+    /** Date string shown as the uploaded date in the details line. */
     uploadedAt?: string | null;
+    /** Size in bytes, shown beside the file type in the details line. */
     fileSize?: number | null;
 }
 export type MediaSource = string | MediaFile;
 export interface MediaSources {
+    /** Image paths or files, in display order. */
     photos: MediaSource[];
+    /** Video paths or files, in display order. */
     videos: MediaSource[];
+    /** YouTube video ids, not urls. */
     youtubeVideoIds: string[];
 }
 export interface ViewerFile {
+    /** Stored path passed to `resolveUrl`, or an absolute url used as is; also drives kind detection when `name` has no known extension. */
     url: string;
+    /** File name; picks the viewer kind before the url does and names the stage. */
     name?: string | null;
+    /** Date string shown as the uploaded date in the details line. */
     uploadedAt?: string | null;
+    /** Size in bytes, shown beside the file type in the details line. */
     fileSize?: number | null;
 }
 export type FileKind = Exclude<MediaKind, "youtube">;
 export interface PreviewPlan {
+    /** Indexes into `items` to show as preview tiles, in order. */
     tiles: number[];
+    /** How many items are left out, for a "+N more" tile. */
     hidden: number;
 }
 /** Resolves an app-stored path to a fetchable url; the host app owns base-url/CDN logic. */
 export type ResolveUrl = (path: string) => string;
+/** Lowest image zoom, in percent. */
 export declare const MIN_ZOOM = 25;
+/** Highest image zoom, in percent. */
 export declare const MAX_ZOOM = 400;
+/** Percent added or removed by one zoom-in or zoom-out press. */
 export declare const ZOOM_STEP = 25;
+/** Rates offered in the playback-speed menu. */
 export declare const PLAYBACK_SPEEDS: readonly [0.5, 0.75, 1, 1.25, 1.5, 2];
+/** Seconds skipped by the rewind and forward buttons and their J / L keys. */
 export declare const SEEK_STEP_SECONDS = 10;
 /** Passes an already-absolute url through untouched; only a bare stored path goes through resolveUrl. */
 export declare const resolveMediaUrl: (path: string, resolveUrl: ResolveUrl) => string;

package/dist/Components/MediaViewer/mediaItems.js

@@ -11,10 +11,15 @@ exports.formatFileSize = formatFileSize;
 exports.formatUploadedDate = formatUploadedDate;
 exports.fileTypeLabel = fileTypeLabel;
 exports.isTypingTarget = isTypingTarget;
+/** Lowest image zoom, in percent. */
 exports.MIN_ZOOM = 25;
+/** Highest image zoom, in percent. */
 exports.MAX_ZOOM = 400;
+/** Percent added or removed by one zoom-in or zoom-out press. */
 exports.ZOOM_STEP = 25;
+/** Rates offered in the playback-speed menu. */
 exports.PLAYBACK_SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+/** Seconds skipped by the rewind and forward buttons and their J / L keys. */
 exports.SEEK_STEP_SECONDS = 10;
 const ABSOLUTE_URL_RE = /^(blob:|data:|https?:)/;
 /** Passes an already-absolute url through untouched; only a bare stored path goes through resolveUrl. */

package/dist/Components/Modal/Modal.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
 import { ChakraModelProps, ModalHeaderSlotProps, ModalBodySlotProps, ModalFooterSlotProps } from "./ModalProps";
+/** Header slot of `Modal`; its style props are spread onto the rendered header. */
 export declare const ModalHeader: React.FC<ModalHeaderSlotProps>;
+/** Body slot of `Modal`; its style props are spread onto the rendered body. */
 export declare const ModalBody: React.FC<ModalBodySlotProps>;
+/** Footer slot of `Modal`; its style props are spread onto the rendered footer. */
 export declare const ModalFooter: React.FC<ModalFooterSlotProps>;
 /** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
 export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, closeOnEsc, trapFocus, motionPreset, scrollBehavior, children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Modal/Modal.js

@@ -7,14 +7,17 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const warnDroppedSlotChildren_1 = require("./warnDroppedSlotChildren");
 const findSlot_1 = require("../Common/findSlot");
+/** Header slot of `Modal`; its style props are spread onto the rendered header. */
 const ModalHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ModalHeader = ModalHeader;
+/** Body slot of `Modal`; its style props are spread onto the rendered body. */
 const ModalBody = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ModalBody = ModalBody;
+/** Footer slot of `Modal`; its style props are spread onto the rendered footer. */
 const ModalFooter = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };