pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/AppSwitcher/AppSwitcherProps.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSuiteApps = exports.formatShortcut = exports.shortcutKeys = exports.matchesShortcut = exports.filterApps = exports.appInitials = void 0;
+const NON_WORD = /[^\p{L}\p{N}]+/u;
+/** Up to two initials, so a mark stays legible without an icon. */
+const appInitials = (name) => {
+    const words = name.trim().split(NON_WORD).filter(Boolean);
+    if (words.length === 0)
+        return "?";
+    if (words.length === 1)
+        return words[0].slice(0, 2).toUpperCase();
+    return (words[0][0] + words[1][0]).toUpperCase();
+};
+exports.appInitials = appInitials;
+const filterApps = (apps, query) => {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return apps;
+    return apps.filter((app) => {
+        var _a, _b;
+        return [app.name, (_a = app.description) !== null && _a !== void 0 ? _a : "", ...((_b = app.keywords) !== null && _b !== void 0 ? _b : [])]
+            .join(" ")
+            .toLowerCase()
+            .includes(q);
+    });
+};
+exports.filterApps = filterApps;
+/** "mod" is Cmd on Apple platforms and Ctrl everywhere else. */
+const matchesShortcut = (event, shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+    const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+    if (parts.length === 0)
+        return false;
+    const key = parts[parts.length - 1];
+    const mods = new Set(parts.slice(0, -1));
+    const wantsMod = mods.has("mod");
+    const wantsCtrl = mods.has("ctrl") || (wantsMod && !isApple);
+    const wantsMeta = mods.has("cmd") || mods.has("meta") || (wantsMod && isApple);
+    if (event.ctrlKey !== wantsCtrl)
+        return false;
+    if (event.metaKey !== wantsMeta)
+        return false;
+    if (event.shiftKey !== mods.has("shift"))
+        return false;
+    if (event.altKey !== mods.has("alt"))
+        return false;
+    return event.key.toLowerCase() === key;
+};
+exports.matchesShortcut = matchesShortcut;
+const APPLE_SYMBOLS = { mod: "⌘", cmd: "⌘", meta: "⌘", ctrl: "⌃", shift: "⇧", alt: "⌥" };
+const OTHER_LABELS = { mod: "Ctrl", cmd: "Win", meta: "Win", ctrl: "Ctrl", shift: "Shift", alt: "Alt" };
+const isAppleNow = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** One label per key in a chord, so a named key such as `enter` stays a single cap. */
+const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
+    const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+    const table = isApple ? APPLE_SYMBOLS : OTHER_LABELS;
+    return parts.map((p, i) => { var _a; return (i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase())); });
+};
+exports.shortcutKeys = shortcutKeys;
+const formatShortcut = (shortcut, isApple = isAppleNow()) => (0, exports.shortcutKeys)(shortcut, isApple).join(isApple ? "" : "+");
+exports.formatShortcut = formatShortcut;
+const parseAbsolute = (option, raw) => {
+    try {
+        return new URL(raw.trim());
+    }
+    catch {
+        throw new Error(`[AppSwitcher] buildSuiteApps: ${option} ${JSON.stringify(raw)} is not an absolute URL.`);
+    }
+};
+/**
+ * Derives every app's origin from the host the consumer is already served on, so one deployment
+ * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
+ */
+const buildSuiteApps = (apps, { baseUrl, baseSubdomain, devFallbackBaseUrl }) => {
+    const base = parseAbsolute("baseUrl", baseUrl);
+    const hostHasLabel = base.hostname.split(".").includes(baseSubdomain);
+    const useFallback = !hostHasLabel && devFallbackBaseUrl !== undefined;
+    const source = useFallback ? parseAbsolute("devFallbackBaseUrl", devFallbackBaseUrl) : base;
+    const labels = source.hostname.split(".");
+    const at = labels.indexOf(baseSubdomain);
+    return apps.map(({ subdomain, url, ...app }) => {
+        if (url)
+            return { ...app, url: url.trim() };
+        if (useFallback && subdomain === baseSubdomain)
+            return { ...app, url: base.origin };
+        // Without the label there is nothing to swap, and every app would silently share one origin.
+        if (at === -1) {
+            throw new Error(`[AppSwitcher] buildSuiteApps: ${JSON.stringify(baseSubdomain)} is not a label in ` +
+                `"${source.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
+                `Give that app an explicit url, or pass a baseUrl that contains the label.`);
+        }
+        const next = new URL(source.toString());
+        next.hostname = labels.map((l, i) => (i === at ? subdomain : l)).join(".");
+        return { ...app, url: next.origin };
+    });
+};
+exports.buildSuiteApps = buildSuiteApps;

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

@@ -0,0 +1,25 @@
+import { type AppOption, type SuiteAppSource, type SuiteUrlOptions } from "./AppSwitcherProps";
+/** Every app in the Pixelize suite. */
+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;
+}
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+export declare const PIXELIZE_SUITE: readonly PixelizeSuiteApp[];
+/** Options for `resolveSuiteApps`; the URL fields are `buildSuiteApps`'s. */
+export interface ResolveSuiteAppsOptions extends SuiteUrlOptions {
+    /** The app this UI runs inside; always listed, even while pre-release. */
+    currentAppId: SuiteAppId;
+    /** Production drops pre-release apps so customers are never linked to a dead host. */
+    isProduction: boolean;
+    /** Explicit origin per app (e.g. Account's own deployment variable); wins over derivation. An undefined value falls back to derivation. */
+    urls?: Partial<Record<SuiteAppId, string>>;
+    /** Per-app changes to the catalogue entry, e.g. `{ hrms: { preRelease: false } }` once it ships. */
+    overrides?: Partial<Record<SuiteAppId, Partial<Omit<PixelizeSuiteApp, "id">>>>;
+}
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+export declare const resolveSuiteApps: ({ currentAppId, isProduction, urls, overrides, ...urlOptions }: ResolveSuiteAppsOptions) => AppOption[];

package/dist/Components/AppSwitcher/pixelizeSuite.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSuiteApps = exports.PIXELIZE_SUITE = void 0;
+const lucide_react_1 = require("lucide-react");
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+exports.PIXELIZE_SUITE = [
+    {
+        id: "crm",
+        subdomain: "crm",
+        name: "CRM",
+        description: "Leads, deals and pipeline",
+        icon: lucide_react_1.LayoutGrid,
+        keywords: ["leads", "deals", "pipeline", "contacts", "sales"],
+    },
+    {
+        id: "account",
+        subdomain: "account",
+        name: "Account",
+        description: "Organization and members",
+        icon: lucide_react_1.Building2,
+        keywords: ["organization", "members", "roles", "settings", "profile"],
+    },
+    {
+        id: "tickets",
+        subdomain: "tickets",
+        name: "Tickets",
+        description: "Support requests and queues",
+        icon: lucide_react_1.Headphones,
+        keywords: ["support", "helpdesk", "issues", "sla"],
+    },
+    {
+        id: "billing",
+        subdomain: "billing",
+        name: "Billing",
+        description: "Invoices and plans",
+        icon: lucide_react_1.Receipt,
+        keywords: ["invoices", "plans", "payments", "subscription"],
+        preRelease: true,
+    },
+    {
+        id: "hrms",
+        subdomain: "hrms",
+        name: "HRMS",
+        description: "People, leave and payroll",
+        icon: lucide_react_1.Users,
+        keywords: ["people", "employees", "leave", "attendance", "payroll"],
+        preRelease: true,
+    },
+    {
+        id: "social",
+        subdomain: "social",
+        name: "Social",
+        description: "Campaigns and inbox",
+        icon: lucide_react_1.Megaphone,
+        keywords: ["campaigns", "posts", "inbox", "marketing"],
+        preRelease: true,
+    },
+];
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+const resolveSuiteApps = ({ currentAppId, isProduction, urls, overrides, ...urlOptions }) => {
+    const sources = exports.PIXELIZE_SUITE.flatMap((entry) => {
+        const { preRelease, ...app } = { ...entry, ...overrides === null || overrides === void 0 ? void 0 : overrides[entry.id] };
+        if (isProduction && preRelease && app.id !== currentAppId)
+            return [];
+        const url = urls === null || urls === void 0 ? void 0 : urls[app.id];
+        return [url ? { ...app, url } : app];
+    });
+    return (0, AppSwitcherProps_1.buildSuiteApps)(sources, urlOptions);
+};
+exports.resolveSuiteApps = resolveSuiteApps;

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

@@ -0,0 +1,3 @@
+/** Fires `onTrigger` on the shortcut. Inert when `shortcut` is null, and never in SSR. */
+export declare const useAppSwitcherShortcut: (shortcut: string | null | undefined, onTrigger: () => void, enabled?: boolean) => void;
+export default useAppSwitcherShortcut;

package/dist/Components/AppSwitcher/useAppSwitcherShortcut.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppSwitcherShortcut = void 0;
+const react_1 = require("react");
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+const isTypingTarget = (target) => {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    return ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+};
+/** Fires `onTrigger` on the shortcut. Inert when `shortcut` is null, and never in SSR. */
+const useAppSwitcherShortcut = (shortcut, onTrigger, enabled = true) => {
+    (0, react_1.useEffect)(() => {
+        if (!shortcut || !enabled || typeof window === "undefined")
+            return undefined;
+        const handler = (event) => {
+            if (event.defaultPrevented || isTypingTarget(event.target))
+                return;
+            if (!(0, AppSwitcherProps_1.matchesShortcut)(event, shortcut))
+                return;
+            event.preventDefault();
+            onTrigger();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [shortcut, enabled, onTrigger]);
+};
+exports.useAppSwitcherShortcut = useAppSwitcherShortcut;
+exports.default = exports.useAppSwitcherShortcut;

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

@@ -11,13 +11,15 @@ const Theme_1 = require("../../Theme");
 const provider_1 = require("../../Theme/provider");
 const fontSize_1 = require("../../Theme/provider/fontSize");
 const brands_1 = require("../../Theme/tokens/brands");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const SelectV2_1 = __importDefault(require("../SelectV2/SelectV2"));
+const Select_1 = __importDefault(require("../Select/Select"));
 const FieldLabel = ({ children }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: 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: colors.boxborder[500] }));
+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)();
@@ -29,11 +31,11 @@ const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange,
     const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
     const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
     const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";
-    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [showBrand && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: themeLabel }), (0, jsx_runtime_1.jsx)(SelectV2_1.default, { options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [showBrand && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: themeLabel }), (0, jsx_runtime_1.jsx)(Select_1.default, { native: false, options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
                             if (!option)
                                 return;
                             onBrandChange === null || onBrandChange === void 0 ? void 0 : onBrandChange(String(option.id));
-                        } })] })), showColorMode && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: colorModeLabel }), (0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "appearance-mode-switcher", children: (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: fontSizeLabel }), (0, jsx_runtime_1.jsx)(SelectV2_1.default, { options: fontSize_1.FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
+                        } })] })), showColorMode && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: colorModeLabel }), (0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "appearance-mode-switcher", children: (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: fontSizeLabel }), (0, jsx_runtime_1.jsx)(Select_1.default, { native: false, options: fontSize_1.FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
                         // Each row previews the size it sets, so the list is self-explaining.
                         renderOption: (option) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", style: { fontSize: String(option.id) }, children: option.label })), onChange: (option) => {
                             if (!option)

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

@@ -1,18 +1,31 @@
-import type { SelectV2Size } from "../SelectV2/SelectV2Props";
+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;
-    size?: SelectV2Size;
+    /** 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

@@ -0,0 +1,9 @@
+import type { AudioRecorderProps } from "./AudioRecorderProps";
+export declare const formatElapsed: (ms: number) => string;
+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

@@ -0,0 +1,171 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recordingFileName = exports.formatElapsed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const DEFAULT_LABELS = {
+    start: "Start recording",
+    stop: "Stop recording",
+    recording: "Recording",
+    recorded: "Recorded",
+    permissionDenied: "Microphone access was denied. Allow it in your browser settings and try again.",
+    unsupported: "Audio recording is not supported in this browser.",
+};
+const PREFERRED_MIME = "audio/webm";
+const TICK_MS = 250;
+const EXTENSIONS = {
+    "audio/webm": "webm",
+    "audio/wav": "wav",
+    "audio/wave": "wav",
+    "audio/x-wav": "wav",
+    "audio/ogg": "ogg",
+    "audio/mp4": "m4a",
+    "audio/mpeg": "mp3",
+};
+const formatElapsed = (ms) => {
+    const total = Math.floor(ms / 1000);
+    return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}`;
+};
+exports.formatElapsed = formatElapsed;
+const recordingFileName = (mime, now) => {
+    var _a, _b;
+    const type = mime.split(";")[0].trim().toLowerCase() || PREFERRED_MIME;
+    return { type, name: `recording-${now}.${(_a = EXTENSIONS[type]) !== null && _a !== void 0 ? _a : (((_b = type.split("/")[1]) === null || _b === void 0 ? void 0 : _b.replace(/^x-/, "")) || "webm")}` };
+};
+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 };
+    const [status, setStatus] = (0, react_1.useState)("idle");
+    const [elapsedMs, setElapsedMs] = (0, react_1.useState)(0);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const recorderRef = (0, react_1.useRef)(null);
+    const streamRef = (0, react_1.useRef)(null);
+    const chunksRef = (0, react_1.useRef)([]);
+    const timerRef = (0, react_1.useRef)(null);
+    const startedAtRef = (0, react_1.useRef)(0);
+    const mountedRef = (0, react_1.useRef)(true);
+    const startingRef = (0, react_1.useRef)(false);
+    const onRecordedRef = (0, react_1.useRef)(onRecorded);
+    const textRef = (0, react_1.useRef)(text);
+    onRecordedRef.current = onRecorded;
+    textRef.current = text;
+    const release = (0, react_1.useCallback)(() => {
+        var _a;
+        if (timerRef.current !== null)
+            clearInterval(timerRef.current);
+        timerRef.current = null;
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+        recorderRef.current = null;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        mountedRef.current = true;
+        if (!isSupported())
+            setStatus("unsupported");
+        return () => {
+            mountedRef.current = false;
+            const recorder = recorderRef.current;
+            if (recorder) {
+                recorder.ondataavailable = null;
+                recorder.onstop = null;
+                recorder.onerror = null;
+                if (recorder.state !== "inactive") {
+                    try {
+                        recorder.stop();
+                    }
+                    catch {
+                        // NOTE: a recorder the browser already tore down throws on stop.
+                    }
+                }
+            }
+            release();
+        };
+    }, [release]);
+    const stop = (0, react_1.useCallback)(() => {
+        const recorder = recorderRef.current;
+        if (recorder && recorder.state !== "inactive")
+            recorder.stop();
+    }, []);
+    const start = (0, react_1.useCallback)(async () => {
+        var _a, _b;
+        if (startingRef.current)
+            return;
+        if (!isSupported()) {
+            setStatus("unsupported");
+            return;
+        }
+        startingRef.current = true;
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            if (!mountedRef.current) {
+                stream.getTracks().forEach((track) => track.stop());
+                return;
+            }
+            streamRef.current = stream;
+            chunksRef.current = [];
+            const useWebm = (_b = (_a = MediaRecorder.isTypeSupported) === null || _a === void 0 ? void 0 : _a.call(MediaRecorder, PREFERRED_MIME)) !== null && _b !== void 0 ? _b : false;
+            const recorder = new MediaRecorder(stream, useWebm ? { mimeType: PREFERRED_MIME } : undefined);
+            recorderRef.current = recorder;
+            recorder.ondataavailable = (event) => {
+                if (event.data.size > 0)
+                    chunksRef.current.push(event.data);
+            };
+            recorder.onerror = () => {
+                release();
+                setStatus("idle");
+            };
+            recorder.onstop = () => {
+                const duration = Date.now() - startedAtRef.current;
+                const { type, name } = (0, exports.recordingFileName)(recorder.mimeType || PREFERRED_MIME, Date.now());
+                const file = new File(chunksRef.current, name, { type });
+                release();
+                setStatus("idle");
+                setElapsedMs(duration);
+                setAnnouncement(`${textRef.current.recorded} ${(0, exports.formatElapsed)(duration)}`);
+                if (file.size > 0)
+                    onRecordedRef.current(file);
+            };
+            recorder.start();
+            startedAtRef.current = Date.now();
+            setElapsedMs(0);
+            setStatus("recording");
+            setAnnouncement(textRef.current.recording);
+            timerRef.current = setInterval(() => {
+                const elapsed = Date.now() - startedAtRef.current;
+                if (maxDurationSec !== undefined && elapsed >= maxDurationSec * 1000) {
+                    setElapsedMs(maxDurationSec * 1000);
+                    stop();
+                    return;
+                }
+                setElapsedMs(elapsed);
+            }, TICK_MS);
+        }
+        catch (error) {
+            release();
+            if (!mountedRef.current)
+                return;
+            const name = error === null || error === void 0 ? void 0 : error.name;
+            setStatus(name === "NotFoundError" ? "unsupported" : "denied");
+        }
+        finally {
+            startingRef.current = false;
+        }
+    }, [maxDurationSec, release, stop]);
+    const isRecording = status === "recording";
+    const blocked = status === "unsupported";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: isRecording ? text.stop : text.start, size: "sm", colorScheme: isRecording ? "red" : undefined, variant: isRecording ? "solid" : "outline", "aria-pressed": isRecording, isDisabled: isRecording ? false : isDisabled || blocked, onClick: isRecording ? stop : () => void start() }), isRecording ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "audio-recorder-dot", boxSize: "0.5rem", borderRadius: "full", bg: colors.semanticText.error, "aria-hidden": true, sx: {
+                                    "@media (prefers-reduced-motion: no-preference)": { animation: "audio-recorder-pulse 1.2s ease-in-out infinite" },
+                                    "@keyframes audio-recorder-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.35 } },
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "timer", fontSize: "sm", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: (0, exports.formatElapsed)(elapsedMs) })] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? ((0, jsx_runtime_1.jsx)(react_2.Text, { role: "alert", mt: 1, fontSize: "xs", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
+};
+exports.default = AudioRecorder;

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

@@ -0,0 +1,26 @@
+/** 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. */
+export interface AudioRecorderProps {
+    /** Receives the finished recording; never called for an empty one or after unmount. */
+    onRecorded: (file: File) => void;
+    /** Stops the recording by itself after this many seconds. No limit when omitted. */
+    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/Avatar.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarProps } from "./AvatarProps";
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Avatar;

package/dist/Components/Avatar/Avatar.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const avatarColorway_1 = require("./avatarColorway");
+const avatarSizing_1 = require("./avatarSizing");
+const STATUS_TONE = {
+    online: "success", away: "warning", busy: "error", offline: "neutral",
+};
+const STATUS_LABEL = {
+    online: "Online", away: "Away", busy: "Busy", offline: "Offline",
+};
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+const Avatar = (0, react_1.forwardRef)(function Avatar({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }, ref) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [imageFailed, setImageFailed] = (0, react_1.useState)(false);
+    const px = avatarSizing_1.SIZE_PX[size];
+    const showImage = Boolean(src) && !imageFailed;
+    const { bg, color } = (0, avatarColorway_1.resolveAvatarColorway)(name, colors);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : avatarColorway_1.initialsFor)(name) })), status ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "0", right: "0", boxSize: avatarSizing_1.DOT_SIZE[size], borderRadius: "full", bg: (0, tone_1.toneInk)(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+});
+Avatar.displayName = "Avatar";
+exports.default = Avatar;

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

@@ -0,0 +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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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");
+const Avatar_1 = __importDefault(require("./Avatar"));
+const avatarSizing_1 = require("./avatarSizing");
+const summarize = (names, overflow) => {
+    if (overflow <= 0)
+        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);
+    const overflow = people.length - shown.length;
+    const px = avatarSizing_1.SIZE_PX[size];
+    const ring = { border: "2px solid", borderColor: colors.background[50] };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : summarize(people.map((p) => p.name), overflow), "data-testid": testId, children: [shown.map((person, i) => ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, ml: i === 0 ? 0 : `-${avatarSizing_1.OVERLAP[size]}`, borderRadius: "full", ...ring, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: person.name, src: person.src, size: size }) }, `${person.name}-${i}`))), overflow > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, ml: `-${avatarSizing_1.OVERLAP[size]}`, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: colors.backgroundColor.secondary, color: colors.text[700], fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, ...ring, children: ["+", overflow] })) : null] }));
+};
+exports.default = AvatarGroup;

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

@@ -0,0 +1,21 @@
+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`. */
+export interface AvatarGroupProps {
+    /** Rendered left to right; only the first `max` show as avatars. */
+    people: AvatarGroupMember[];
+    /** Default 4. */
+    max?: number;
+    /** Applies to every avatar and the overflow chip. Default "md". */
+    size?: AvatarSize;
+    /** Overrides the auto-generated group `aria-label`. */
+    ariaLabel?: string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

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

@@ -0,0 +1,22 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** ControlSize plus "2xs" for a badge-sized overlay and "xl" for a profile header. */
+export type AvatarSize = ControlSize | "2xs" | "xl";
+/** Presence indicator; the dot color and its accessible label both follow this. */
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+/** Image with graceful initials fallback, a deterministic per-name fill, and an optional presence dot. */
+export interface AvatarProps {
+    /** Used for initials, image alt text, the deterministic fill color, and the default `aria-label`. */
+    name: string;
+    /** Image URL. Falls back to initials on a missing src or a failed load. */
+    src?: string;
+    /** Default "md". */
+    size?: AvatarSize;
+    /** Presence dot in the bottom-right corner; omitted entirely when unset. */
+    status?: AvatarStatus;
+    /** Overrides the initials fallback's `aria-label` (defaults to `name`); no effect while the image shows, where `alt` is `name`. */
+    ariaLabel?: string;
+    /** Replaces the built-in two-letter initials derivation. */
+    getInitials?: (name: string) => string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

package/dist/Components/Avatar/AvatarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });