@auth0/quantum-product 2.10.2 → 2.10.4

package/command-palette/command-palette-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const commandPaletteComponentName: "QuantumCommandPalette";
+export declare function getCommandPaletteUtilityClass(slot: string): string;
+export declare const commandPaletteClasses: Record<"dialog" | "footer" | "input" | "kbd" | "separator" | "tab" | "root" | "loading" | "list" | "item" | "group" | "inputWrapper" | "inputIcon" | "groupHeading" | "groupItems" | "itemSelected" | "itemIcon" | "itemLabel" | "itemShortcut" | "tabs" | "tabSelected" | "empty" | "dialogPaper", string>;
+export type CommandPaletteClasses = typeof commandPaletteClasses;
+export type CommandPaletteClassKey = keyof CommandPaletteClasses;

package/command-palette/command-palette-classes.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commandPaletteClasses = exports.commandPaletteComponentName = void 0;
+exports.getCommandPaletteUtilityClass = getCommandPaletteUtilityClass;
+var classes_1 = require("../styles/classes");
+exports.commandPaletteComponentName = 'QuantumCommandPalette';
+function getCommandPaletteUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.commandPaletteComponentName, slot);
+}
+exports.commandPaletteClasses = (0, classes_1.generateUtilityClasses)(exports.commandPaletteComponentName, [
+    'root',
+    'input',
+    'inputWrapper',
+    'inputIcon',
+    'list',
+    'group',
+    'groupHeading',
+    'groupItems',
+    'item',
+    'itemSelected',
+    'itemIcon',
+    'itemLabel',
+    'itemShortcut',
+    'tabs',
+    'tab',
+    'tabSelected',
+    'separator',
+    'empty',
+    'loading',
+    'dialog',
+    'dialogPaper',
+    'footer',
+    'kbd',
+]);

package/command-palette/command-palette-context.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { ICommandPaletteContextValue, ICommandPaletteState, ICommandPaletteStore } from './command-palette-types';
+export declare const CommandPaletteContext: React.Context<ICommandPaletteContextValue | undefined>;
+export declare const CommandPaletteStoreContext: React.Context<ICommandPaletteStore | undefined>;
+export declare const CommandPaletteGroupContext: React.Context<string | undefined>;
+export declare function useCommandPaletteContext(): ICommandPaletteContextValue;
+export declare function useCommandPaletteStore(): ICommandPaletteStore;
+export declare function useCommandPaletteState<T>(selector: (state: ICommandPaletteState) => T): T;

package/command-palette/command-palette-context.js

@@ -0,0 +1,93 @@
+"use strict";
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPaletteGroupContext = exports.CommandPaletteStoreContext = exports.CommandPaletteContext = void 0;
+exports.useCommandPaletteContext = useCommandPaletteContext;
+exports.useCommandPaletteStore = useCommandPaletteStore;
+exports.useCommandPaletteState = useCommandPaletteState;
+var React = __importStar(require("react"));
+exports.CommandPaletteContext = React.createContext(undefined);
+exports.CommandPaletteStoreContext = React.createContext(undefined);
+exports.CommandPaletteGroupContext = React.createContext(undefined);
+function useCommandPaletteContext() {
+    var context = React.useContext(exports.CommandPaletteContext);
+    if (!context) {
+        throw new Error('useCommandPaletteContext must be used within a CommandPalette');
+    }
+    return context;
+}
+function useCommandPaletteStore() {
+    var store = React.useContext(exports.CommandPaletteStoreContext);
+    if (!store) {
+        throw new Error('useCommandPaletteStore must be used within a CommandPalette');
+    }
+    return store;
+}
+function useCommandPaletteState(selector) {
+    var store = useCommandPaletteStore();
+    var selectorRef = React.useRef(selector);
+    var _a = __read(React.useState(function () { return selector(store.snapshot()); }), 2), state = _a[0], setState = _a[1];
+    React.useEffect(function () {
+        selectorRef.current = selector;
+        setState(selector(store.snapshot()));
+    }, [selector, store]);
+    React.useLayoutEffect(function () {
+        var unsubscribe = store.subscribe(function () {
+            setState(function (prevSelected) {
+                var nextSelected = selectorRef.current(store.snapshot());
+                return Object.is(prevSelected, nextSelected) ? prevSelected : nextSelected;
+            });
+        });
+        return unsubscribe;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [store]);
+    return state;
+}

package/command-palette/command-palette-dialog.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ICommandPaletteDialogProps } from './command-palette-types';
+export declare const CommandPaletteDialog: React.ForwardRefExoticComponent<ICommandPaletteDialogProps & React.RefAttributes<HTMLDivElement>>;

package/command-palette/command-palette-dialog.js

@@ -0,0 +1,112 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPaletteDialog = void 0;
+var React = __importStar(require("react"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var useForkRef_1 = __importDefault(require("@mui/utils/useForkRef"));
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var command_palette_1 = require("./command-palette");
+var command_palette_classes_1 = require("./command-palette-classes");
+var StyledDialog = (0, styled_1.styled)(Dialog_1.default, {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'Dialog',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '& .MuiDialog-container': {
+            alignItems: 'flex-start',
+            paddingTop: '15vh',
+        },
+        '& .MuiDialog-paper': {
+            margin: 0,
+            maxWidth: 640,
+            width: '100%',
+            borderRadius: theme.spacing(2),
+            overflow: 'hidden',
+            backgroundColor: theme.tokens.color_bg_layer_elevated,
+            border: "1px solid ".concat(theme.tokens.color_border_default),
+            boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.12),\n                0px 13.7866px 33.4221px rgba(0, 0, 0, 0.086),\n                0px 7.37098px 17.869px rgba(0, 0, 0, 0.07),\n                0px 4.13211px 10.0172px rgba(0, 0, 0, 0.06),\n                0px 2.19453px 5.32008px rgba(0, 0, 0, 0.048),\n                0px 0.913195px 2.21381px rgba(0, 0, 0, 0.034)",
+        },
+        '& .MuiBackdrop-root': {
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            backdropFilter: 'blur(4px)',
+        },
+    });
+});
+exports.CommandPaletteDialog = React.forwardRef(function (props, ref) {
+    var _a = props.open, open = _a === void 0 ? false : _a, onOpenChange = props.onOpenChange, overlayProps = props.overlayProps, contentProps = props.contentProps, children = props.children, className = props.className, commandPaletteProps = __rest(props, ["open", "onOpenChange", "overlayProps", "contentProps", "children", "className"]);
+    var paletteRef = React.useRef(null);
+    var handleRef = (0, useForkRef_1.default)(ref, paletteRef);
+    var handleEntered = React.useCallback(function () {
+        requestAnimationFrame(function () {
+            var _a;
+            var input = (_a = paletteRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(command_palette_classes_1.commandPaletteClasses.input));
+            input === null || input === void 0 ? void 0 : input.focus();
+        });
+    }, []);
+    var handleClose = React.useCallback(function () {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    }, [onOpenChange]);
+    return (React.createElement(StyledDialog, { open: open, onClose: handleClose, TransitionProps: { onEntered: handleEntered }, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.dialog, className), maxWidth: false, BackdropProps: overlayProps, PaperProps: contentProps },
+        React.createElement(command_palette_1.CommandPalette, __assign({ ref: handleRef }, commandPaletteProps), children)));
+});
+exports.CommandPaletteDialog.displayName = 'CommandPaletteDialog';

package/command-palette/command-palette-empty.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ICommandPaletteEmptyProps } from './command-palette-types';
+export declare const CommandPaletteEmpty: React.ForwardRefExoticComponent<ICommandPaletteEmptyProps & React.RefAttributes<HTMLDivElement>>;

package/command-palette/command-palette-empty.js

@@ -0,0 +1,90 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPaletteEmpty = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var command_palette_classes_1 = require("./command-palette-classes");
+var command_palette_context_1 = require("./command-palette-context");
+var Root = (0, styled_1.styled)('div', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'Empty',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing(6, 2),
+        color: theme.tokens.color_fg_disabled,
+        fontSize: theme.typography.body2.fontSize,
+        userSelect: 'none',
+    });
+});
+exports.CommandPaletteEmpty = React.forwardRef(function (props, ref) {
+    var _a = props.children, children = _a === void 0 ? 'No results found.' : _a, className = props.className, emptyProps = __rest(props, ["children", "className"]);
+    var filteredCount = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.filtered.count; });
+    var isSearching = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.search.length > 0; });
+    if (!isSearching || filteredCount > 0)
+        return null;
+    return (React.createElement(Root, __assign({ ref: ref, role: "presentation", className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.empty, className) }, emptyProps), children));
+});
+exports.CommandPaletteEmpty.displayName = 'CommandPaletteEmpty';

package/command-palette/command-palette-footer.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { ICommandPaletteFooterProps, ICommandPaletteShortcutKeyProps } from './command-palette-types';
+export declare const CommandPaletteFooter: React.ForwardRefExoticComponent<ICommandPaletteFooterProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandPaletteShortcutKey: React.ForwardRefExoticComponent<ICommandPaletteShortcutKeyProps & React.RefAttributes<HTMLElement>>;

package/command-palette/command-palette-footer.js

@@ -0,0 +1,111 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPaletteShortcutKey = exports.CommandPaletteFooter = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var command_palette_classes_1 = require("./command-palette-classes");
+var Root = (0, styled_1.styled)('div', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'Footer',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: theme.spacing(2),
+        padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2)),
+        color: theme.tokens.color_fg_disabled,
+        fontSize: theme.typography.caption.fontSize,
+    });
+});
+var Kbd = (0, styled_1.styled)('kbd', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'FooterKbd',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: theme.typography.pxToRem(20),
+        height: theme.typography.pxToRem(20),
+        padding: "0 ".concat(theme.spacing(0.5)),
+        borderRadius: theme.spacing(0.5),
+        backgroundColor: theme.tokens.color_bg_state_neutral_subtle,
+        border: "1px solid ".concat(theme.tokens.color_border_default),
+        color: theme.tokens.color_fg_disabled,
+        fontSize: theme.typography.caption.fontSize,
+        fontFamily: theme.typography.caption.fontFamily,
+        lineHeight: theme.typography.caption.lineHeight,
+    });
+});
+exports.CommandPaletteFooter = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, footerProps = __rest(props, ["children", "className"]);
+    return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.footer, className) }, footerProps), children));
+});
+exports.CommandPaletteFooter.displayName = 'CommandPaletteFooter';
+exports.CommandPaletteShortcutKey = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, kbdProps = __rest(props, ["children", "className"]);
+    return (React.createElement(Kbd, __assign({ ref: ref, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.kbd, className) }, kbdProps), children));
+});
+exports.CommandPaletteShortcutKey.displayName = 'CommandPaletteShortcutKey';

package/command-palette/command-palette-group.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ICommandPaletteGroupProps } from './command-palette-types';
+export declare const CommandPaletteGroup: React.ForwardRefExoticComponent<ICommandPaletteGroupProps & React.RefAttributes<HTMLDivElement>>;

package/command-palette/command-palette-group.js

@@ -0,0 +1,119 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPaletteGroup = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var use_id_1 = require("../utils/use-id");
+var command_palette_classes_1 = require("./command-palette-classes");
+var command_palette_context_1 = require("./command-palette-context");
+var Root = (0, styled_1.styled)('div', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'Group',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(0.5, 1),
+        outline: 'none',
+    });
+});
+var Heading = (0, styled_1.styled)('div', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'GroupHeading',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.5)),
+        fontSize: theme.typography.overline.fontSize,
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.tokens.color_fg_disabled,
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        userSelect: 'none',
+    });
+});
+var Items = (0, styled_1.styled)('div', {
+    name: command_palette_classes_1.commandPaletteComponentName,
+    slot: 'GroupItems',
+})(function () { return ({
+    outline: 'none',
+}); });
+exports.CommandPaletteGroup = React.forwardRef(function (props, ref) {
+    var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, children = props.children, className = props.className, groupProps = __rest(props, ["heading", "forceMount", "children", "className"]);
+    var id = (0, use_id_1.useId)() || '';
+    var headingId = "".concat(id, "-heading");
+    var context = (0, command_palette_context_1.useCommandPaletteContext)();
+    React.useLayoutEffect(function () {
+        var cleanup = context.group(id);
+        return cleanup;
+    }, [context, id]);
+    var filteredState = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.filtered; });
+    var search = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.search; });
+    var groupCount = filteredState.groups.get(id);
+    var isVisible = forceMount || context.filter === false || !search || (groupCount !== undefined && groupCount > 0);
+    if (!isVisible)
+        return null;
+    return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.group, className), role: "presentation" }, groupProps),
+        heading && (React.createElement(Heading, { id: headingId, className: command_palette_classes_1.commandPaletteClasses.groupHeading, "aria-hidden": true }, heading)),
+        React.createElement(command_palette_context_1.CommandPaletteGroupContext.Provider, { value: id },
+            React.createElement(Items, { role: "group", className: command_palette_classes_1.commandPaletteClasses.groupItems, "aria-labelledby": heading ? headingId : undefined }, children))));
+});
+exports.CommandPaletteGroup.displayName = 'CommandPaletteGroup';

package/command-palette/command-palette-input.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ICommandPaletteInputProps } from './command-palette-types';
+export declare const CommandPaletteInput: React.ForwardRefExoticComponent<ICommandPaletteInputProps & React.RefAttributes<HTMLInputElement>>;