pixelize-design-library 3.0.1-beta.1 → 3.1.1

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

@@ -0,0 +1,97 @@
+import type { ComponentType, ReactNode } from "react";
+/** Icon component signature AppMark renders with size+color — matches lucide-react's icon shape exactly. */
+export type AppIconComponent = ComponentType<{
+    size?: number | string;
+    color?: string;
+}>;
+/** A lucide-style component, a ready node, or nothing — then the mark falls back to initials. */
+export type AppIcon = AppIconComponent | ReactNode;
+/** One app in the switcher's grid; missing/duplicate `id` or a missing `url` (without `locked`) warn once in dev only. */
+export interface AppOption {
+    /** 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. */
+export declare const appInitials: (name: string) => string;
+export declare const filterApps: (apps: AppOption[], query: string) => AppOption[];
+/** Minimal keyboard-event shape `matchesShortcut` needs, so callers can test a shortcut without a real KeyboardEvent. */
+export type ShortcutEvent = Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">;
+/** "mod" is Cmd on Apple platforms and Ctrl everywhere else. */
+export declare const matchesShortcut: (event: ShortcutEvent, shortcut: string, isApple?: boolean) => boolean;
+/** One label per key in a chord, so a named key such as `enter` stays a single cap. */
+export declare const shortcutKeys: (shortcut: string, isApple?: boolean) => string[];
+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;
+}
+/**
+ * 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.
+ */
+export declare const buildSuiteApps: (apps: SuiteAppSource[], { baseUrl, baseSubdomain, devFallbackBaseUrl }: SuiteUrlOptions) => AppOption[];

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

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppearanceSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+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 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: 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)();
+    const brandOptions = (0, react_1.useMemo)(() => Object.keys(Theme_1.ThemesList).map((name) => ({
+        id: name,
+        label: name.charAt(0).toUpperCase() + name.slice(1),
+        icon: brandSwatch(name, colors),
+    })), [colors]);
+    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)(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)(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)
+                                return;
+                            onFontSizeChange === null || onFontSizeChange === void 0 ? void 0 : onFontSizeChange(String(option.id));
+                        } })] }))] }));
+};
+exports.AppearanceSettings = AppearanceSettings;
+exports.default = exports.AppearanceSettings;

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

@@ -0,0 +1,31 @@
+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/AppearanceSettings/AppearanceSettingsProps.js

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

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/AudioRecorder/AudioRecorderProps.js

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

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;