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

package/dist/Components/Modal/dialogNaming.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogNaming = DialogNaming;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+// Chakra's getDialogProps always points aria-labelledby at the header, so override it at the source.
+function DialogNaming({ label, labelledBy, children }) {
+    const modal = (0, react_2.useModalContext)();
+    const value = (0, react_1.useMemo)(() => label || labelledBy
+        ? {
+            ...modal,
+            getDialogProps: ((...args) => ({
+                ...modal.getDialogProps(...args),
+                ...(label ? { "aria-label": label } : {}),
+                "aria-labelledby": labelledBy,
+            })),
+        }
+        : modal, [modal, label, labelledBy]);
+    return (0, jsx_runtime_1.jsx)(react_2.ModalContextProvider, { value: value, children: children });
+}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const warnDroppedSlotChildren: (owner: string, children: React.ReactNode, slots: unknown[], advice?: string) => void;

package/dist/Components/Modal/warnDroppedSlotChildren.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warnDroppedSlotChildren = void 0;
+const react_1 = __importDefault(require("react"));
+const warnedByOwner = new Map();
+const PORTAL_ADVICE = "Pass nested dialogs and live regions through the portalChildren prop.";
+const nameOf = (type) => {
+    if (typeof type === "string")
+        return type;
+    const fn = type;
+    return (fn === null || fn === void 0 ? void 0 : fn.displayName) || (fn === null || fn === void 0 ? void 0 : fn.name) || "Component";
+};
+const collect = (children, slots, dropped) => {
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (typeof child === "string" || typeof child === "number") {
+            if (String(child).trim())
+                dropped.set("#text", "text");
+            continue;
+        }
+        if (!react_1.default.isValidElement(child))
+            continue;
+        if (slots.includes(child.type))
+            continue;
+        if (child.type === react_1.default.Fragment) {
+            collect(child.props.children, slots, dropped);
+            continue;
+        }
+        dropped.set(child.type, nameOf(child.type));
+    }
+};
+const warnDroppedSlotChildren = (owner, children, slots, advice = PORTAL_ADVICE) => {
+    var _a;
+    if (process.env.NODE_ENV === "production")
+        return;
+    const warned = (_a = warnedByOwner.get(owner)) !== null && _a !== void 0 ? _a : new Set();
+    warnedByOwner.set(owner, warned);
+    const dropped = new Map();
+    collect(children, slots, dropped);
+    dropped.forEach((name, type) => {
+        if (warned.has(type))
+            return;
+        warned.add(type);
+        console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. ${advice}`);
+    });
+};
+exports.warnDroppedSlotChildren = warnDroppedSlotChildren;

package/dist/Components/MoreItems/MoreItems.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { MoreItemsProps } from "./MoreItemsProps";
+/** "+N more" popover trigger for an overflowed list — renders nothing at all once the count reaches 0. */
+declare const MoreItems: React.FC<MoreItemsProps>;
+export default MoreItems;

package/dist/Components/MoreItems/MoreItems.js

@@ -0,0 +1,25 @@
+"use strict";
+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 rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+/** "+N more" popover trigger for an overflowed list — renders nothing at all once the count reaches 0. */
+const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = false, columns = 2, minWidth = "260px", triggerMaxWidth = "250px", trigger = "hover", placement = "bottom-start", }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const countBadgeBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).selected;
+    const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
+    if (count <= 0)
+        return triggerText ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: triggerText }) : null;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", tabIndex: 0, role: "button", borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "xs", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: (0, primitives_1.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+                // Chakra defaults this surface to `colors.gray.700` in dark, which against the
+                // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
+                bg: theme.colors.surfaceRaised, boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.surfaceRaised }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                                var _a, _b, _c;
+                                const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : theme.colors.textMuted;
+                                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-plus", color: theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));
+                            }) }) })] })] }));
+};
+exports.default = MoreItems;

package/dist/Components/MoreItems/MoreItemsProps.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+/** One row in the MoreItems popover grid — id, label and an optional dot color. */
+export interface MoreItem {
+    /** React key for the row; not shown or emitted. */
+    id: string | number;
+    /** Row text, truncated with an ellipsis when it overflows the column. */
+    label: string;
+    /** Optional leading dot color. Falls back to colorResolver or a neutral gray. */
+    color?: string;
+}
+/** Full trigger + popover configuration for MoreItems — see MoreItem for the shape of each listed row. */
+export interface MoreItemsProps {
+    /** Items shown inside the popover. */
+    items: MoreItem[];
+    /** Defaults to items.length; ≤0 either way hides the trigger, falling back to bare triggerText or null. */
+    moreCount?: number;
+    /** Text shown before the "+N more" pill (e.g. the first visible value). */
+    triggerText?: ReactNode;
+    /** Only runs when item.color is unset — item.color always wins over this resolver. */
+    colorResolver?: (item: MoreItem) => string | undefined;
+    /** Hide the colored leading dot entirely. */
+    hideDots?: boolean;
+    /** Columns inside the popover grid. */
+    columns?: number;
+    /** Min width of the popover panel. */
+    minWidth?: string;
+    /** Max width of the trigger before truncation. */
+    triggerMaxWidth?: string;
+    /** Open on "hover" (default) or "click". */
+    trigger?: "hover" | "click";
+    /** Popover placement. */
+    placement?: "bottom-start" | "bottom-end" | "bottom" | "top" | "right" | "left";
+}

package/dist/Components/MoreItems/MoreItemsProps.js

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

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { MultiSelectProps } from "./MultiSelectProps";
-export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): React.JSX.Element;
+/** Email chip input: typed addresses are validated and committed on Enter, shown as removable chips. */
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, addOnBlur, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -1,130 +1,88 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = MultiSelect;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var FormLabel_1 = require("../Common/FormLabel");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-var Tag_1 = __importDefault(require("../Tag/Tag"));
-var lucide_react_1 = require("lucide-react");
-var generateUniqueId = (function () {
-    var counter = 0;
-    return function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const FormLabel_1 = require("../Common/FormLabel");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const motion_1 = require("../../Theme/chakra/motion");
+const useFieldIds_1 = require("../Common/useFieldIds");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const lucide_react_1 = require("lucide-react");
+const generateUniqueId = (() => {
+    let counter = 0;
+    return () => {
         counter += 1;
-        return "".concat(Date.now(), "-").concat(counter);
+        return `${Date.now()}-${counter}`;
     };
 })();
-function MultiSelect(_a) {
-    var _b, _c;
-    var value = _a.value, onValueChange = _a.onValueChange, _d = _a.width, width = _d === void 0 ? "100%" : _d, _e = _a.label, label = _e === void 0 ? "label" : _e, _f = _a.isRequired, isRequired = _f === void 0 ? true : _f, _g = _a.isInformation, isInformation = _g === void 0 ? false : _g, _h = _a.informationMessage, informationMessage = _h === void 0 ? "" : _h, name = _a.name, id = _a.id, _j = _a.placeholderText, placeholderText = _j === void 0 ? "Type valid email and press enter" : _j, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _k = _a.size, size = _k === void 0 ? "md" : _k, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
-    var options = value;
-    var _l = (0, react_1.useState)(""), inputValue = _l[0], setInputValue = _l[1];
-    var _m = (0, react_1.useState)(""), localError = _m[0], setLocalError = _m[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var handleInputChange = (0, react_1.useCallback)(function (e) {
+/** Email chip input: typed addresses are validated and committed on Enter, shown as removable chips. */
+function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, addOnBlur = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, inputStyle, helperText, error, errorMessage, }) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || controlSizes_1.DEFAULT_CONTROL_SIZE));
+    const options = value;
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const [localError, setLocalError] = (0, react_1.useState)("");
+    const inputRef = (0, react_1.useRef)(null);
+    const isInvalid = Boolean(error || localError);
+    const shownErrorMessage = localError || errorMessage;
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error: isInvalid, errorMessage: shownErrorMessage, helperText });
+    const handleInputChange = (0, react_1.useCallback)((e) => {
         setInputValue(e.target.value);
         setLocalError("");
     }, []);
-    var validateEmail = function (email) {
-        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return emailRegex.test(email);
     };
-    var handleKeyDown = function (e) {
-        if (e.key === "Enter" && inputValue.trim() !== "") {
-            if (!validateEmail(inputValue)) {
-                setLocalError("Invalid email address");
+    const commitInput = (0, react_1.useCallback)(() => {
+        const entry = inputValue.trim();
+        if (entry === "")
+            return;
+        if (!validateEmail(entry)) {
+            setLocalError("Invalid email address");
+            return;
+        }
+        if (!options.some((option) => option.label === entry)) {
+            onValueChange([...options, { id: generateUniqueId(), label: entry }]);
+        }
+        setInputValue("");
+    }, [inputValue, options, onValueChange]);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            if (inputValue.trim() === "")
                 return;
-            }
-            var existingOption = options.find(function (option) { return option.label === inputValue; });
-            if (!existingOption) {
-                var newOption = { id: generateUniqueId(), label: inputValue };
-                onValueChange(__spreadArray(__spreadArray([], options, true), [newOption], false));
-                setInputValue("");
-            }
+            e.preventDefault();
+            commitInput();
         }
         else if (e.key === "Backspace" && inputValue === "") {
             onValueChange(options.slice(0, -1));
         }
     };
-    var handleRemove = (0, react_1.useCallback)(function (optionToRemove) {
-        onValueChange(options.filter(function (option) { return option.id !== optionToRemove.id; }));
+    const handleBlur = (0, react_1.useCallback)(() => {
+        if (addOnBlur && !isReadOnly && !isDisabled)
+            commitInput();
+    }, [addOnBlur, isReadOnly, isDisabled, commitInput]);
+    const handleRemove = (0, react_1.useCallback)((optionToRemove) => {
+        onValueChange(options.filter((option) => option.id !== optionToRemove.id));
     }, [options, onValueChange]);
-    return (react_1.default.createElement(react_2.Box, { width: width },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "1px solid", borderColor: error || localError
-                ? theme.colors.red[500]
-                : theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: s.minH, _focusWithin: {
-                borderColor: error || localError
-                    ? theme.colors.red[500]
-                    : theme.colors.primary[500],
-                boxShadow: "0 0 0 0.125rem" +
-                    (error || localError
-                        ? (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error
-                        : (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary),
-            } },
-            options.map(function (option) { return (react_1.default.createElement(Tag_1.default, { key: option.id, size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: function () { return handleRemove(option); }, icon: lucide_react_1.X })); }),
-            react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: __assign({ backgroundColor: "transparent" }, inputStyle), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),
-        (error || localError) && (react_1.default.createElement(ErrorMessage_1.default, { errorMessage: localError || errorMessage })),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, sx: {
+                    ...(0, fieldStyles_1.getFieldStateStyles)(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...(0, motion_1.reducedMotionSx)(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme),
+                }, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: 400, color: theme.colors.text[900], flex: "1", minW: 0, _placeholder: { color: (0, placeholderInk_1.placeholderInk)(theme.colors), opacity: 1 }, style: {
+                            backgroundColor: "transparent",
+                            ...inputStyle,
+                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: options.length === 0 ? placeholderText : "" })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isInvalid, errorMessage: shownErrorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -1,23 +1,48 @@
+/** No `options` prop — typed text is validated as an email, not picked from a list; use `SearchSelect isMultiple`. */
 export type MultiSelectProps = {
-    value: MultiSelctOPtions[];
-    onValueChange: (options: MultiSelctOPtions[]) => void;
+    /** Controlled list of entered chips; the component never keeps its own copy. */
+    value: MultiSelectOption[];
+    /** Fires with the full new list when an email is added, a chip is removed, or Backspace on empty input drops the last chip. */
+    onValueChange: (options: MultiSelectOption[]) => void;
+    /** CSS width of the whole field; defaults to "100%". */
     width?: string;
+    /** Label text above the field; defaults to the literal "label", and an empty string hides the label. */
     label?: string;
+    /** DOM id of the input; the label's `for` and the message ids derive from it. Auto-generated when omitted. */
     id?: string;
+    /** Native `name` of the text input. */
     name?: string;
+    /** Sets native `required` + `aria-required` on the field, and draws the label asterisk. Defaults to true. */
     isRequired?: boolean;
+    /** Shows an info icon beside the label; renders nothing unless `informationMessage` is also set. */
     isInformation?: boolean;
+    /** Tooltip text of the label's info icon; only read when `isInformation` is true. */
     informationMessage?: string;
+    /** Placeholder of the text input, shown only while no chips exist; defaults to "Type valid email and press enter". */
     placeholderText?: string;
+    /** Disables the text input and applies the disabled field styling. */
     isDisabled?: boolean;
+    /** Makes the text input read-only and stops `addOnBlur` from committing; chips can still be removed. */
     isReadOnly?: boolean;
+    /** Also commits the typed email when the field loses focus, not just on Enter. Defaults to false. */
+    addOnBlur?: boolean;
+    /** Marks the field invalid (`aria-invalid` + error border) and swaps `helperText` for `errorMessage`; a rejected email sets this internally too. */
     error?: boolean;
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
-    inputStyle?: {};
+    /** Inline style merged over the text input's own style (after a transparent background), not the outer field. */
+    inputStyle?: object;
+    /** Rendered only while `error` is true; a rejected email's internal "Invalid email address" text wins over this until the input changes. */
     errorMessage?: string;
+    /** Hint under the field; hidden while invalid. */
     helperText?: string;
 };
-export type MultiSelctOPtions = {
+/** One entered chip — id is a generated key, label is the email text the user typed. */
+export type MultiSelectOption = {
+    /** Generated unique key for the chip; not derived from the email. */
     id: string;
+    /** The email address as typed; duplicates are rejected by comparing this. */
     label: string;
 };
+/** @deprecated Typo'd name — use `MultiSelectOption`. */
+export type MultiSelctOPtions = MultiSelectOption;

package/dist/Components/NavLauncher/LauncherTabs.d.ts

@@ -0,0 +1,18 @@
+export type LauncherTabId = "menu" | "quick" | "apps";
+export type LauncherTabItem = {
+    id: LauncherTabId;
+    label: string;
+};
+type LauncherTabsProps = {
+    tabs: readonly LauncherTabItem[];
+    selected: LauncherTabId;
+    onSelect: (id: LauncherTabId) => void;
+    idBase: string;
+    label: string;
+    onLeaveUp: () => void;
+    onLeaveDown: () => void;
+};
+export declare const tabId: (base: string, id: LauncherTabId) => string;
+export declare const panelId: (base: string) => string;
+export declare function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLeaveDown, }: LauncherTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NavLauncher/LauncherTabs.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelId = exports.tabId = void 0;
+exports.LauncherTabs = LauncherTabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tabId = (base, id) => `${base}-tab-${id}`;
+exports.tabId = tabId;
+const panelId = (base) => `${base}-panel`;
+exports.panelId = panelId;
+function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLeaveDown, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const refs = (0, react_2.useRef)(new Map());
+    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const choose = (index) => {
+        var _a;
+        const next = tabs[(index + tabs.length) % tabs.length];
+        onSelect(next.id);
+        (_a = refs.current.get(next.id)) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const current = tabs.findIndex((tab) => tab.id === selected);
+        const handlers = {
+            ArrowRight: () => choose(current + 1),
+            ArrowLeft: () => choose(current - 1),
+            Home: () => choose(0),
+            End: () => choose(tabs.length - 1),
+            ArrowUp: onLeaveUp,
+            ArrowDown: onLeaveDown,
+        };
+        const handle = handlers[event.key];
+        if (!handle)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        handle();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
+            const isSelected = tab.id === selected;
+            return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", role: "tab", id: (0, exports.tabId)(idBase, tab.id), ref: (node) => {
+                    if (node)
+                        refs.current.set(tab.id, node);
+                    else
+                        refs.current.delete(tab.id);
+                }, "aria-selected": isSelected, "aria-controls": isSelected ? (0, exports.panelId)(idBase) : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onSelect(tab.id), position: "relative", flex: { base: 1, md: "none" }, minW: { md: "112px" }, h: "46px", px: { base: "6px", md: "14px" }, whiteSpace: "nowrap", fontSize: "sm", fontWeight: isSelected ? 600 : 500, color: isSelected ? colors.accentText : colors.textMuted, transition: (0, motion_1.transitionFor)(["color"]), _hover: {
+                    color: isSelected ? colors.accentText : colors.text[900],
+                }, _after: {
+                    content: '""',
+                    position: "absolute",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "-1px",
+                    h: "2px",
+                    borderRadius: "2px 2px 0 0",
+                    bg: isSelected ? colors.primary[500] : "transparent",
+                }, sx: { ...ring, borderRadius: "lg" }, children: tab.label }, tab.id));
+        }) }));
+}

package/dist/Components/NavLauncher/NavLauncher.d.ts

@@ -0,0 +1,3 @@
+import type { NavLauncherProps } from "./NavLauncherProps";
+/** Left-drawer navigation launcher: browse every module, pins, Frequent, Recent, search and (compact) the suite's apps. */
+export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs, actions, extraResults, query: controlledQuery, onQueryChange, isSearching, isLoading, keyScreenLimit, frequentLimit, suggestions, searchHint, modKeyLabel, headerActions, maxWidth, labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility, searchMode, synonyms, scopes, activeScope, onScopeChange, quickActions, answers, groupLimit, "data-testid": testId, }: NavLauncherProps): import("react/jsx-runtime").JSX.Element;