@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/navigation/Tabs/Tabs.module.css.mjs

@@ -0,0 +1,26 @@
+//#region src/components/navigation/Tabs/Tabs.module.css
+var e = "_sm_1udqw_45", t = "_md_1udqw_59", n = "_lg_1udqw_73", r = "_root_1udqw_97", i = "_vertical_1udqw_119", a = "_enclosed_1udqw_137", o = "_list_1udqw_159", s = "_horizontal_1udqw_177", c = "_tab_1udqw_211", l = "_track_1udqw_219", u = "_iconOnly_1udqw_331", d = "_fullWidth_1udqw_349", f = "_content_1udqw_399", p = "_icon_1udqw_331", m = "_labelStack_1udqw_447", h = "_labelSizer_1udqw_461", g = "_badge_1udqw_471", _ = "_indicator_1udqw_493", v = "_line_1udqw_535", y = "_pill_1udqw_615", b = "_panel_1udqw_787", x = {
+	sm: e,
+	md: t,
+	lg: n,
+	root: r,
+	vertical: i,
+	enclosed: a,
+	list: o,
+	horizontal: s,
+	tab: c,
+	track: l,
+	iconOnly: u,
+	fullWidth: d,
+	content: f,
+	icon: p,
+	labelStack: m,
+	labelSizer: h,
+	badge: g,
+	indicator: _,
+	line: v,
+	pill: y,
+	panel: b
+};
+//#endregion
+export { g as badge, f as content, x as default, a as enclosed, d as fullWidth, s as horizontal, p as icon, u as iconOnly, _ as indicator, h as labelSizer, m as labelStack, n as lg, v as line, o as list, t as md, b as panel, y as pill, r as root, e as sm, c as tab, l as track, i as vertical };

package/dist/components/navigation/Tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './Tabs';

package/dist/components/overlays/CommandPalette/CommandPalette.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../i18n/en.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../../hooks/useOverlayLayer.cjs.js"),r=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),i=require("../../../utils/hotkeys.cjs.js"),a=require("../../../utils/cx.cjs.js"),o=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),s=require("../../primitives/Kbd/Kbd.cjs.js"),c=require("../Modal/Modal.cjs.js"),ee=require("./CommandPaletteContext.cjs.js"),l=require("./commandPaletteUtils.cjs.js"),u=require("./CommandPalette.module.css.cjs.js"),d=require("./CommandPaletteParts.cjs.js");let f=require("react"),p=require("react/jsx-runtime");function te(t){return e.en.commandPalette.results(t)}var ne=[],re=300,ie=10;function ae({layerIdRef:e,onUnmount:t}){let r=n.useParentOverlayLayer(),i=(0,f.useRef)(t);return i.current=t,(0,f.useLayoutEffect)(()=>(e.current=r,()=>{e.current=null}),[r,e]),(0,f.useLayoutEffect)(()=>()=>i.current(),[]),null}function m({open:e,defaultOpen:d=!1,onOpenChange:te,hotkey:m=`mod+k`,trigger:h,label:oe,search:se,defaultSearch:ce=``,onSearchChange:le,pages:ue,defaultPages:de=ne,onPagesChange:fe,filter:g,shouldFilter:pe=!0,sort:me=!0,highlightMatches:he=!0,closeOnSelect:ge=!0,loop:_e=!0,size:ve=`md`,resultsLabel:ye,instructions:be,showHints:xe=!0,hintLabels:_,backLabel:Se,className:Ce,onMouseDown:we,children:Te,"aria-label":Ee,"aria-labelledby":De,"aria-describedby":Oe,...ke}){let v=r.useMessages(),y=oe??v.commandPalette.label,Ae=ye??v.commandPalette.results,je=be??v.commandPalette.instructions,Me=Se??v.commandPalette.back,[b,x]=t.useControllableState({value:e,defaultValue:d,onChange:te}),[S,C]=t.useControllableState({value:se,defaultValue:ce,onChange:le}),[w,T]=t.useControllableState({value:ue,defaultValue:de,onChange:fe}),E=w.length>0?w[w.length-1]:null,D=(0,f.useId)(),O=`${D}-title`,k=`${D}-instructions`,[Ne,Pe]=(0,f.useState)(null),Fe=Ne??`${D}-listbox`,A=(0,f.useRef)(null),j=(0,f.useRef)(null),M=(0,f.useRef)(null),Ie=n.useParentOverlayLayer(),N=(0,f.useRef)(b);N.current=b;let P=(0,f.useRef)(S);P.current=S;let F=(0,f.useRef)(w);F.current=w;let I=(0,f.useRef)(new Map),[Le,Re]=(0,f.useState)(0),ze=(0,f.useCallback)(e=>(I.current.set(e.key,e),Re(e=>e+1),()=>{I.current.get(e.key)===e&&(I.current.delete(e.key),Re(e=>e+1))}),[]),L=pe&&S.trim()!==``,R=(0,f.useMemo)(()=>{let e=new Map;for(let t of I.current.values()){let n=L?g?g(t.value,S,t.keywords):l.defaultCommandScore(t.value,S,t.keywords):1;n>0&&e.set(t.key,n)}let t=L&&me,n=t?[...new Set(e.values())].sort((e,t)=>t-e):[],r=new Map(n.map((e,t)=>[e,t])),i=new Map,a=new Map,o=new Map;for(let[n,s]of e){let e=t?r.get(s)??0:0;i.set(n,e);let c=I.current.get(n)?.groupKey;c&&(o.set(c,(o.get(c)??0)+1),a.set(c,Math.min(a.get(c)??1/0,e)))}return{visible:new Set(e.keys()),itemOrder:i,groupOrder:a,groupCount:o,count:e.size,ranked:t}},[Le,L,S,g,me]),[z,Be]=(0,f.useState)({}),Ve=(0,f.useCallback)((e,t)=>(Be(n=>n[e]===t?n:{...n,[e]:t}),()=>Be(t=>{if(!(e in t))return t;let n={...t};return delete n[e],n})),[]),B=(0,f.useCallback)(e=>{T(t=>[...t,e]),C(``)},[T,C]),V=(0,f.useCallback)(()=>{F.current.length!==0&&(T(e=>e.slice(0,-1)),C(``))},[T,C]),[He,Ue]=(0,f.useState)(0),We=(0,f.useRef)(v.commandPalette.loading),Ge=(0,f.useCallback)(e=>(We.current=e,Ue(e=>e+1),()=>Ue(e=>e-1)),[]),H=He>0,[Ke,qe]=(0,f.useState)(null),[U,W]=(0,f.useState)(null),G=(0,f.useRef)(U);G.current=U;let K=(0,f.useRef)(!1),Je=(0,f.useRef)(null);(0,f.useLayoutEffect)(()=>{if(!b){Je.current=null;return}let e=j.current;if(!e)return;l.syncDomOrder(e);let t=l.getOrderedOptions(e),n=`${E??``}\u0000${S}`,r=n!==Je.current,i=G.current,a=i!==null&&t.some(e=>e.id===i);if(r||!a){Je.current=n;let a=(t.find(e=>e.getAttribute(`aria-disabled`)!==`true`)??t[0])?.id??null;a!==i&&W(a),r&&(e.scrollTop=0)}}),(0,f.useLayoutEffect)(()=>{if(!K.current||!U)return;K.current=!1;let e=document.getElementById(U);if(!e)return;e.scrollIntoView?.({block:`nearest`});let t=l.getOrderedOptions(j.current),n=t.indexOf(e),r=e.closest(`[role="group"]`),i=n<=0||t[n-1].closest(`[role="group"]`)!==r;if(n===0){let e=j.current;e&&(e.scrollTop=0)}else r&&i&&r.querySelector(`[data-command-heading]`)?.scrollIntoView?.({block:`nearest`})},[U]);let q=(0,f.useCallback)(e=>{let t=l.getOrderedOptions(j.current);if(t.length===0)return;let n=t.findIndex(e=>e.id===G.current),r;r=n===-1?e>0?0:t.length-1:_e&&Math.abs(e)===1?(n+e+t.length)%t.length:Math.min(t.length-1,Math.max(0,n+e)),K.current=!0,W(t[r].id)},[_e]),Ye=(0,f.useRef)(ge);Ye.current=ge;let J=(0,f.useCallback)(e=>{let t=[...I.current.values()].find(t=>t.domId===e);if(!t||t.disabled)return;if(t.to){B(t.to);return}let n={value:t.value,defaultPrevented:!1,preventDefault:()=>{n.defaultPrevented=!0}},r=t.onSelectRef.current?.(n);!n.defaultPrevented&&r!==!1&&Ye.current&&x(!1)},[B,x]),Xe=(0,f.useCallback)(e=>{if(e.nativeEvent.isComposing||e.keyCode===229)return;let{key:t}=e,n=e.ctrlKey&&!e.metaKey&&!e.altKey&&!e.shiftKey,r=e.nativeEvent.code,i=!e.ctrlKey&&!e.metaKey&&!e.altKey;if(t===`ArrowDown`&&i||n&&(t===`n`||r===`KeyN`))e.preventDefault(),q(1);else if(t===`ArrowUp`&&i||n&&(t===`p`||r===`KeyP`))e.preventDefault(),q(-1);else if(t===`PageDown`&&i)e.preventDefault(),q(ie);else if(t===`PageUp`&&i)e.preventDefault(),q(-10);else if(t===`Enter`){if(e.repeat){e.preventDefault();return}let t=G.current;if(!t)return;e.preventDefault(),J(t)}else t===`Escape`?P.current===``?F.current.length>0&&(e.preventDefault(),V()):(e.preventDefault(),C(``)):t===`Backspace`&&!e.repeat&&P.current===``&&F.current.length>0&&(e.preventDefault(),V())},[q,J,C,V]),Ze=ke.onKeyDown,Qe=e=>{Ze?.(e),!(e.defaultPrevented||e.key!==`Escape`||e.target===A.current)&&(P.current===``?F.current.length>0&&(e.preventDefault(),V(),A.current?.focus()):(e.preventDefault(),C(``),A.current?.focus()))},Y=(0,f.useCallback)(()=>{N.current||(P.current!==``&&C(``),F.current.length>0&&T(ne),W(null))},[C,T]),$e=s.useKbdPlatform(),et=m?i.parseHotkey(m,$e):null,tt=et?i.hotkeyToAria(et):void 0;(0,f.useEffect)(()=>{if(!m)return;let e=i.parseHotkey(m,$e);if(!e)return;let t=t=>{if(t.defaultPrevented||t.isComposing||t.repeat||!i.matchesHotkey(t,e)||t.target!==A.current&&i.isTypingTarget(t.target))return;let r=n.getOverlayLayerStack(),a=N.current?M.current:Ie,o=a?r.findIndex(e=>e.id===a):-1;r.slice(o+1).some(e=>e.modal&&e.id!==M.current)||(t.preventDefault(),x(!N.current))};return document.addEventListener(`keydown`,t),()=>document.removeEventListener(`keydown`,t)},[m,$e,Ie,x]);let[nt,rt]=(0,f.useState)(``),X=(0,f.useRef)(null),Z=R.count,Q=E?z[E]??E:null,it=(0,f.useRef)(Ae);it.current=Ae,(0,f.useEffect)(()=>{if(!b){X.current=null,rt(``);return}let e=`${E??``}\u0000${S}`;if(X.current===null){X.current={trigger:e,count:-1,page:E};return}if(H){rt(We.current);return}let t=X.current;if(t.trigger===e&&(t.count===-1||t.count===Z))return;let n=window.setTimeout(()=>{let n=it.current(Z),r=t.page!==E;X.current={trigger:e,count:Z,page:E},rt(r&&Q?`${Q}, ${n}`:n)},re);return()=>window.clearTimeout(n)},[b,H,E,S,Z,Q]);let at=(0,f.useMemo)(()=>({search:S,setSearch:e=>C(e),filtering:L,highlightMatches:he,results:R,register:ze,activeId:U,setActiveId:W,selectById:J,pages:w,currentPage:E,pushPage:B,popPage:V,pageTitles:z,registerPageTitle:Ve,loading:H,registerLoading:Ge,statusSlot:Ke,setStatusSlot:qe,inputRef:A,listboxRef:j,listboxId:Fe,setListboxId:Pe,titleId:O,label:y,instructionsId:k,backLabel:Me,onInputKeyDown:Xe,reset:Y}),[S,C,L,he,R,ze,U,J,w,E,B,V,z,Ve,H,Ge,Ke,Fe,O,y,k,Me,Xe,Y]),ot=e=>{we?.(e),!e.defaultPrevented&&(e.target.closest(`input, textarea, select, button, a[href], [contenteditable]`)||e.preventDefault())},st=h&&(0,f.isValidElement)(h)?(0,f.cloneElement)(h,{"aria-keyshortcuts":h.props[`aria-keyshortcuts`]??tt}):null,$={navigate:_?.navigate??v.commandPalette.hints.navigate,select:_?.select??v.commandPalette.hints.select,back:_?.back??v.commandPalette.hints.back,close:_?.close??v.commandPalette.hints.close};return(0,p.jsx)(ee.CommandPaletteContext.Provider,{value:at,children:(0,p.jsxs)(c.Modal,{open:b,onOpenChange:x,size:ve,placement:`top`,mobileLayout:`card`,showClose:!1,initialFocusRef:A,children:[st&&(0,p.jsx)(c.Modal.Trigger,{children:st}),(0,p.jsxs)(c.Modal.Content,{...ke,"aria-label":Ee,"aria-labelledby":De??(Ee?void 0:O),"aria-describedby":Oe,className:a.cx(u.default.palette,Ce),onMouseDown:ot,onKeyDown:Qe,children:[(0,p.jsx)(ae,{layerIdRef:M,onUnmount:Y}),(0,p.jsx)(o.VisuallyHidden,{id:O,children:y}),(0,p.jsx)(o.VisuallyHidden,{id:k,children:je}),Te,xe&&(0,p.jsxs)(`div`,{className:u.default.footer,"aria-hidden":`true`,children:[(0,p.jsxs)(`span`,{className:u.default.hint,children:[(0,p.jsx)(s.Kbd,{size:`sm`,keyName:`up`}),(0,p.jsx)(s.Kbd,{size:`sm`,keyName:`down`}),$.navigate]}),(0,p.jsxs)(`span`,{className:u.default.hint,children:[(0,p.jsx)(s.Kbd,{size:`sm`,keyName:`enter`}),$.select]}),w.length>0&&(0,p.jsxs)(`span`,{className:u.default.hint,children:[(0,p.jsx)(s.Kbd,{size:`sm`,keyName:`backspace`}),$.back]}),(0,p.jsxs)(`span`,{className:u.default.hint,children:[(0,p.jsx)(s.Kbd,{size:`sm`,keyName:`esc`}),$.close]})]}),(0,p.jsx)(o.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:nt})]})]})})}var h=Object.assign(m,{Input:d.CommandPaletteInput,List:d.CommandPaletteList,Group:d.CommandPaletteGroup,Item:d.CommandPaletteItem,Empty:d.CommandPaletteEmpty,Loading:d.CommandPaletteLoading,Separator:d.CommandPaletteSeparator,Page:d.CommandPalettePage});exports.CommandPalette=h,exports.CommandPaletteEmpty=d.CommandPaletteEmpty,exports.CommandPaletteGroup=d.CommandPaletteGroup,exports.CommandPaletteInput=d.CommandPaletteInput,exports.CommandPaletteItem=d.CommandPaletteItem,exports.CommandPaletteList=d.CommandPaletteList,exports.CommandPaletteLoading=d.CommandPaletteLoading,exports.CommandPalettePage=d.CommandPalettePage,exports.CommandPaletteSeparator=d.CommandPaletteSeparator,exports.defaultCommandResultsLabel=te,exports.defaultCommandScore=l.defaultCommandScore;

package/dist/components/overlays/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,152 @@
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+import { CommandPaletteFilter } from './CommandPaletteContext';
+import { CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPalettePage, CommandPaletteSeparator } from './CommandPaletteParts';
+import { defaultCommandScore } from './commandPaletteUtils';
+export type { CommandPaletteFilter, CommandPaletteSelectEvent } from './CommandPaletteContext';
+export type { CommandPaletteEmptyProps, CommandPaletteGroupProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteLoadingProps, CommandPalettePageProps, CommandPaletteSeparatorProps, CommandPaletteShortcut, } from './CommandPaletteParts';
+export { CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPalettePage, CommandPaletteSeparator, };
+export { defaultCommandScore };
+/** Width of the palette on screens 640px and wider (Modal `sm` 30rem, `md` 40rem, `lg` 48rem). */
+export type CommandPaletteSize = Size;
+/** Text of the keyboard hint row. Override to localize. */
+export interface CommandPaletteHintLabels {
+    /** After the arrow keys. @default "to navigate" */
+    navigate?: string;
+    /** After Enter. @default "to select" */
+    select?: string;
+    /** After Backspace, shown on nested pages. @default "to go back" */
+    back?: string;
+    /** After Escape. @default "to close" */
+    close?: string;
+}
+/** Default results announcement: "No results", "1 result", "3 results". */
+export declare function defaultCommandResultsLabel(count: number): string;
+export interface CommandPaletteProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onSelect"> {
+    /** Whether the palette is open (controlled). Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Whether the palette starts open (uncontrolled). @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Global shortcut that toggles the palette, such as `"mod+k"` (`mod` is
+     * Cmd on Mac and Ctrl elsewhere), `"shift+mod+p"`, or `"ctrl+/"`.
+     * Pass `false` to turn it off.
+     *
+     * The listener ignores the key while another modal layer (Modal, Drawer,
+     * a second palette) is open on top, and while the user is typing in a
+     * text field, textarea, select, or contenteditable element, except the
+     * palette's own search input (so the shortcut also closes it).
+     * @default "mod+k"
+     */
+    hotkey?: string | false;
+    /**
+     * Optional element that opens the palette, usually a `Button`. It gets
+     * `aria-haspopup="dialog"`, `aria-expanded`, and `aria-keyshortcuts`
+     * for the hotkey, and focus returns to it on close.
+     */
+    trigger?: ReactElement;
+    /** Accessible name of the dialog (visually hidden). Localize it here. @default "Command palette" */
+    label?: string;
+    /** The search text (controlled). Pair with `onSearchChange`. */
+    search?: string;
+    /** Initial search text (uncontrolled). @default "" */
+    defaultSearch?: string;
+    /**
+     * Called with the search text as the user types. Use it to fetch
+     * server-driven results (with `shouldFilter={false}`). The search is
+     * cleared (with a call to this) each time the palette finishes closing.
+     */
+    onSearchChange?: (search: string) => void;
+    /** Stack of open page names, root first (controlled). See `CommandPalette.Page`. */
+    pages?: string[];
+    /** Initial page stack (uncontrolled). @default [] */
+    defaultPages?: string[];
+    /** Called with the next page stack when the user drills in or goes back. */
+    onPagesChange?: (pages: string[]) => void;
+    /**
+     * Custom scoring: return `0` to hide an item and higher numbers to rank
+     * it first. Defaults to a fuzzy, case- and diacritic-insensitive match on
+     * the item's `value` and `keywords` (see `defaultCommandScore`).
+     */
+    filter?: CommandPaletteFilter;
+    /**
+     * Filter and rank items against the search. Turn it off for
+     * server-driven results: every rendered item is shown, in order.
+     * @default true
+     */
+    shouldFilter?: boolean;
+    /**
+     * Rank matching items (and groups) by score while searching. Off keeps the
+     * rendered order. Ranking reorders the DOM so screen readers read results
+     * in ranked order; the list's children remount when ranking starts and
+     * stops, so keep item state outside the items. @default true
+     */
+    sort?: boolean;
+    /** Mark the matched characters in plain-text item labels. @default true */
+    highlightMatches?: boolean;
+    /**
+     * Close after an item's `onSelect` runs. An item can still keep the
+     * palette open with `event.preventDefault()` or by returning `false`.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Arrow keys wrap from the last item to the first and back. @default true */
+    loop?: boolean;
+    /** Width on screens 640px and wider: `sm` 30rem, `md` 40rem, `lg` 48rem. @default "md" */
+    size?: CommandPaletteSize;
+    /** Builds the polite results announcement. Localize it here. @default "3 results" */
+    resultsLabel?: (count: number) => string;
+    /**
+     * Keyboard instructions for screen readers, attached once to the search
+     * input with `aria-describedby`. Localize it here.
+     */
+    instructions?: string;
+    /** Show the keyboard hint row at the bottom (hidden from assistive tech and below 640px). @default true */
+    showHints?: boolean;
+    /** Text of the keyboard hint row. */
+    hintLabels?: CommandPaletteHintLabels;
+    /** Accessible name of the back button shown on nested pages. @default "Back" */
+    backLabel?: string;
+    /** `CommandPalette.Input`, `CommandPalette.List` and its contents. */
+    children?: ReactNode;
+}
+/**
+ * A modal command menu: a search field over a filtered, grouped list of
+ * commands, opened with a global hotkey (Cmd/Ctrl+K by default).
+ *
+ * Compose it from `CommandPalette.Input`, `CommandPalette.List`,
+ * `CommandPalette.Group`, `CommandPalette.Item`, `CommandPalette.Empty`,
+ * `CommandPalette.Loading`, `CommandPalette.Separator`, and
+ * `CommandPalette.Page`. Items register themselves, so filtering and the
+ * keyboard order follow the rendered order (ranked by match while
+ * searching). Put items and groups directly inside the list, a group, or a
+ * page (components and fragments are fine; extra wrapper elements are not).
+ *
+ * Built on `Modal`: the page is inert, scroll is locked, focus is trapped,
+ * and focus returns to the opener on close. Nested overlays work through
+ * the shared overlay layer stack.
+ *
+ * Keyboard (focus stays in the search input; the active option is tracked
+ * with `aria-activedescendant`):
+ * - Down / Up (and Ctrl+N / Ctrl+P): next / previous item, wrapping.
+ * - PageDown / PageUp: move 10 items (stops at the ends).
+ * - Home / End: move the text caret, as in any text field (APG editable
+ *   combobox guidance), not the active item.
+ * - Enter: run the active item, then close (key repeats are ignored).
+ * - Escape: clears the search if there is any; otherwise goes back one
+ *   page on a nested page; otherwise closes.
+ * - Backspace in an empty search: go back one page.
+ */
+declare function CommandPaletteRoot({ open: openProp, defaultOpen, onOpenChange, hotkey, trigger, label: labelProp, search: searchProp, defaultSearch, onSearchChange, pages: pagesProp, defaultPages, onPagesChange, filter, shouldFilter, sort, highlightMatches, closeOnSelect, loop, size, resultsLabel: resultsLabelProp, instructions: instructionsProp, showHints, hintLabels, backLabel: backLabelProp, className, onMouseDown, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: CommandPaletteProps): import("react").JSX.Element;
+export declare const CommandPalette: typeof CommandPaletteRoot & {
+    Input: typeof CommandPaletteInput;
+    List: typeof CommandPaletteList;
+    Group: typeof CommandPaletteGroup;
+    Item: typeof CommandPaletteItem;
+    Empty: typeof CommandPaletteEmpty;
+    Loading: typeof CommandPaletteLoading;
+    Separator: typeof CommandPaletteSeparator;
+    Page: typeof CommandPalettePage;
+};

package/dist/components/overlays/CommandPalette/CommandPalette.mjs

@@ -0,0 +1,375 @@
+import { en as e } from "../../../i18n/en.mjs";
+import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
+import { getOverlayLayerStack as n, useParentOverlayLayer as r } from "../../../hooks/useOverlayLayer.mjs";
+import { useMessages as i } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { hotkeyToAria as a, isTypingTarget as o, matchesHotkey as ee, parseHotkey as s } from "../../../utils/hotkeys.mjs";
+import { cx as te } from "../../../utils/cx.mjs";
+import { VisuallyHidden as c } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { Kbd as l, useKbdPlatform as ne } from "../../primitives/Kbd/Kbd.mjs";
+import { Modal as u } from "../Modal/Modal.mjs";
+import { CommandPaletteContext as re } from "./CommandPaletteContext.mjs";
+import { defaultCommandScore as ie, getOrderedOptions as ae, syncDomOrder as oe } from "./commandPaletteUtils.mjs";
+import d from "./CommandPalette.module.css.mjs";
+import { CommandPaletteEmpty as f, CommandPaletteGroup as se, CommandPaletteInput as p, CommandPaletteItem as m, CommandPaletteList as ce, CommandPaletteLoading as h, CommandPalettePage as g, CommandPaletteSeparator as _ } from "./CommandPaletteParts.mjs";
+import { cloneElement as le, isValidElement as ue, useCallback as v, useEffect as de, useId as fe, useLayoutEffect as y, useMemo as pe, useRef as b, useState as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/components/overlays/CommandPalette/CommandPalette.tsx
+function me(t) {
+	return e.commandPalette.results(t);
+}
+var he = [], ge = 300, _e = 10;
+function ve({ layerIdRef: e, onUnmount: t }) {
+	let n = r(), i = b(t);
+	return i.current = t, y(() => (e.current = n, () => {
+		e.current = null;
+	}), [n, e]), y(() => () => i.current(), []), null;
+}
+function ye({ open: e, defaultOpen: f = !1, onOpenChange: se, hotkey: p = "mod+k", trigger: m, label: ce, search: h, defaultSearch: g = "", onSearchChange: _, pages: me, defaultPages: ye = he, onPagesChange: be, filter: xe, shouldFilter: Se = !0, sort: Ce = !0, highlightMatches: we = !0, closeOnSelect: Te = !0, loop: Ee = !0, size: De = "md", resultsLabel: Oe, instructions: ke, showHints: Ae = !0, hintLabels: w, backLabel: je, className: Me, onMouseDown: Ne, children: Pe, "aria-label": Fe, "aria-labelledby": Ie, "aria-describedby": Le, ...Re }) {
+	let T = i(), E = ce ?? T.commandPalette.label, ze = Oe ?? T.commandPalette.results, Be = ke ?? T.commandPalette.instructions, Ve = je ?? T.commandPalette.back, [D, O] = t({
+		value: e,
+		defaultValue: f,
+		onChange: se
+	}), [k, A] = t({
+		value: h,
+		defaultValue: g,
+		onChange: _
+	}), [j, M] = t({
+		value: me,
+		defaultValue: ye,
+		onChange: be
+	}), N = j.length > 0 ? j[j.length - 1] : null, He = fe(), P = `${He}-title`, Ue = `${He}-instructions`, [We, Ge] = x(null), Ke = We ?? `${He}-listbox`, F = b(null), I = b(null), qe = b(null), Je = r(), L = b(D);
+	L.current = D;
+	let R = b(k);
+	R.current = k;
+	let z = b(j);
+	z.current = j;
+	let B = b(/* @__PURE__ */ new Map()), [Ye, Xe] = x(0), Ze = v((e) => (B.current.set(e.key, e), Xe((e) => e + 1), () => {
+		B.current.get(e.key) === e && (B.current.delete(e.key), Xe((e) => e + 1));
+	}), []), V = Se && k.trim() !== "", Qe = pe(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of B.current.values()) {
+			let n = V ? xe ? xe(t.value, k, t.keywords) : ie(t.value, k, t.keywords) : 1;
+			n > 0 && e.set(t.key, n);
+		}
+		let t = V && Ce, n = t ? [...new Set(e.values())].sort((e, t) => t - e) : [], r = new Map(n.map((e, t) => [e, t])), i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map();
+		for (let [n, ee] of e) {
+			let e = t ? r.get(ee) ?? 0 : 0;
+			i.set(n, e);
+			let s = B.current.get(n)?.groupKey;
+			s && (o.set(s, (o.get(s) ?? 0) + 1), a.set(s, Math.min(a.get(s) ?? Infinity, e)));
+		}
+		return {
+			visible: new Set(e.keys()),
+			itemOrder: i,
+			groupOrder: a,
+			groupCount: o,
+			count: e.size,
+			ranked: t
+		};
+	}, [
+		Ye,
+		V,
+		k,
+		xe,
+		Ce
+	]), [$e, et] = x({}), tt = v((e, t) => (et((n) => n[e] === t ? n : {
+		...n,
+		[e]: t
+	}), () => et((t) => {
+		if (!(e in t)) return t;
+		let n = { ...t };
+		return delete n[e], n;
+	})), []), H = v((e) => {
+		M((t) => [...t, e]), A("");
+	}, [M, A]), U = v(() => {
+		z.current.length !== 0 && (M((e) => e.slice(0, -1)), A(""));
+	}, [M, A]), [nt, rt] = x(0), it = b(T.commandPalette.loading), at = v((e) => (it.current = e, rt((e) => e + 1), () => rt((e) => e - 1)), []), W = nt > 0, [ot, st] = x(null), [G, K] = x(null), q = b(G);
+	q.current = G;
+	let ct = b(!1), lt = b(null);
+	y(() => {
+		if (!D) {
+			lt.current = null;
+			return;
+		}
+		let e = I.current;
+		if (!e) return;
+		oe(e);
+		let t = ae(e), n = `${N ?? ""}\u0000${k}`, r = n !== lt.current, i = q.current, a = i !== null && t.some((e) => e.id === i);
+		if (r || !a) {
+			lt.current = n;
+			let a = (t.find((e) => e.getAttribute("aria-disabled") !== "true") ?? t[0])?.id ?? null;
+			a !== i && K(a), r && (e.scrollTop = 0);
+		}
+	}), y(() => {
+		if (!ct.current || !G) return;
+		ct.current = !1;
+		let e = document.getElementById(G);
+		if (!e) return;
+		e.scrollIntoView?.({ block: "nearest" });
+		let t = ae(I.current), n = t.indexOf(e), r = e.closest("[role=\"group\"]"), i = n <= 0 || t[n - 1].closest("[role=\"group\"]") !== r;
+		if (n === 0) {
+			let e = I.current;
+			e && (e.scrollTop = 0);
+		} else r && i && r.querySelector("[data-command-heading]")?.scrollIntoView?.({ block: "nearest" });
+	}, [G]);
+	let J = v((e) => {
+		let t = ae(I.current);
+		if (t.length === 0) return;
+		let n = t.findIndex((e) => e.id === q.current), r;
+		r = n === -1 ? e > 0 ? 0 : t.length - 1 : Ee && Math.abs(e) === 1 ? (n + e + t.length) % t.length : Math.min(t.length - 1, Math.max(0, n + e)), ct.current = !0, K(t[r].id);
+	}, [Ee]), ut = b(Te);
+	ut.current = Te;
+	let Y = v((e) => {
+		let t = [...B.current.values()].find((t) => t.domId === e);
+		if (!t || t.disabled) return;
+		if (t.to) {
+			H(t.to);
+			return;
+		}
+		let n = {
+			value: t.value,
+			defaultPrevented: !1,
+			preventDefault: () => {
+				n.defaultPrevented = !0;
+			}
+		}, r = t.onSelectRef.current?.(n);
+		!n.defaultPrevented && r !== !1 && ut.current && O(!1);
+	}, [H, O]), dt = v((e) => {
+		if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+		let { key: t } = e, n = e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey, r = e.nativeEvent.code, i = !e.ctrlKey && !e.metaKey && !e.altKey;
+		if (t === "ArrowDown" && i || n && (t === "n" || r === "KeyN")) e.preventDefault(), J(1);
+		else if (t === "ArrowUp" && i || n && (t === "p" || r === "KeyP")) e.preventDefault(), J(-1);
+		else if (t === "PageDown" && i) e.preventDefault(), J(_e);
+		else if (t === "PageUp" && i) e.preventDefault(), J(-10);
+		else if (t === "Enter") {
+			if (e.repeat) {
+				e.preventDefault();
+				return;
+			}
+			let t = q.current;
+			if (!t) return;
+			e.preventDefault(), Y(t);
+		} else t === "Escape" ? R.current === "" ? z.current.length > 0 && (e.preventDefault(), U()) : (e.preventDefault(), A("")) : t === "Backspace" && !e.repeat && R.current === "" && z.current.length > 0 && (e.preventDefault(), U());
+	}, [
+		J,
+		Y,
+		A,
+		U
+	]), ft = Re.onKeyDown, pt = (e) => {
+		ft?.(e), !(e.defaultPrevented || e.key !== "Escape" || e.target === F.current) && (R.current === "" ? z.current.length > 0 && (e.preventDefault(), U(), F.current?.focus()) : (e.preventDefault(), A(""), F.current?.focus()));
+	}, mt = v(() => {
+		L.current || (R.current !== "" && A(""), z.current.length > 0 && M(he), K(null));
+	}, [A, M]), ht = ne(), gt = p ? s(p, ht) : null, _t = gt ? a(gt) : void 0;
+	de(() => {
+		if (!p) return;
+		let e = s(p, ht);
+		if (!e) return;
+		let t = (t) => {
+			if (t.defaultPrevented || t.isComposing || t.repeat || !ee(t, e) || t.target !== F.current && o(t.target)) return;
+			let r = n(), i = L.current ? qe.current : Je, a = i ? r.findIndex((e) => e.id === i) : -1;
+			r.slice(a + 1).some((e) => e.modal && e.id !== qe.current) || (t.preventDefault(), O(!L.current));
+		};
+		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+	}, [
+		p,
+		ht,
+		Je,
+		O
+	]);
+	let [vt, yt] = x(""), X = b(null), Z = Qe.count, Q = N ? $e[N] ?? N : null, bt = b(ze);
+	bt.current = ze, de(() => {
+		if (!D) {
+			X.current = null, yt("");
+			return;
+		}
+		let e = `${N ?? ""}\u0000${k}`;
+		if (X.current === null) {
+			X.current = {
+				trigger: e,
+				count: -1,
+				page: N
+			};
+			return;
+		}
+		if (W) {
+			yt(it.current);
+			return;
+		}
+		let t = X.current;
+		if (t.trigger === e && (t.count === -1 || t.count === Z)) return;
+		let n = window.setTimeout(() => {
+			let n = bt.current(Z), r = t.page !== N;
+			X.current = {
+				trigger: e,
+				count: Z,
+				page: N
+			}, yt(r && Q ? `${Q}, ${n}` : n);
+		}, ge);
+		return () => window.clearTimeout(n);
+	}, [
+		D,
+		W,
+		N,
+		k,
+		Z,
+		Q
+	]);
+	let xt = pe(() => ({
+		search: k,
+		setSearch: (e) => A(e),
+		filtering: V,
+		highlightMatches: we,
+		results: Qe,
+		register: Ze,
+		activeId: G,
+		setActiveId: K,
+		selectById: Y,
+		pages: j,
+		currentPage: N,
+		pushPage: H,
+		popPage: U,
+		pageTitles: $e,
+		registerPageTitle: tt,
+		loading: W,
+		registerLoading: at,
+		statusSlot: ot,
+		setStatusSlot: st,
+		inputRef: F,
+		listboxRef: I,
+		listboxId: Ke,
+		setListboxId: Ge,
+		titleId: P,
+		label: E,
+		instructionsId: Ue,
+		backLabel: Ve,
+		onInputKeyDown: dt,
+		reset: mt
+	}), [
+		k,
+		A,
+		V,
+		we,
+		Qe,
+		Ze,
+		G,
+		Y,
+		j,
+		N,
+		H,
+		U,
+		$e,
+		tt,
+		W,
+		at,
+		ot,
+		Ke,
+		P,
+		E,
+		Ue,
+		Ve,
+		dt,
+		mt
+	]), St = (e) => {
+		Ne?.(e), !e.defaultPrevented && (e.target.closest("input, textarea, select, button, a[href], [contenteditable]") || e.preventDefault());
+	}, Ct = m && ue(m) ? le(m, { "aria-keyshortcuts": m.props["aria-keyshortcuts"] ?? _t }) : null, $ = {
+		navigate: w?.navigate ?? T.commandPalette.hints.navigate,
+		select: w?.select ?? T.commandPalette.hints.select,
+		back: w?.back ?? T.commandPalette.hints.back,
+		close: w?.close ?? T.commandPalette.hints.close
+	};
+	return /* @__PURE__ */ S(re.Provider, {
+		value: xt,
+		children: /* @__PURE__ */ C(u, {
+			open: D,
+			onOpenChange: O,
+			size: De,
+			placement: "top",
+			mobileLayout: "card",
+			showClose: !1,
+			initialFocusRef: F,
+			children: [Ct && /* @__PURE__ */ S(u.Trigger, { children: Ct }), /* @__PURE__ */ C(u.Content, {
+				...Re,
+				"aria-label": Fe,
+				"aria-labelledby": Ie ?? (Fe ? void 0 : P),
+				"aria-describedby": Le,
+				className: te(d.palette, Me),
+				onMouseDown: St,
+				onKeyDown: pt,
+				children: [
+					/* @__PURE__ */ S(ve, {
+						layerIdRef: qe,
+						onUnmount: mt
+					}),
+					/* @__PURE__ */ S(c, {
+						id: P,
+						children: E
+					}),
+					/* @__PURE__ */ S(c, {
+						id: Ue,
+						children: Be
+					}),
+					Pe,
+					Ae && /* @__PURE__ */ C("div", {
+						className: d.footer,
+						"aria-hidden": "true",
+						children: [
+							/* @__PURE__ */ C("span", {
+								className: d.hint,
+								children: [
+									/* @__PURE__ */ S(l, {
+										size: "sm",
+										keyName: "up"
+									}),
+									/* @__PURE__ */ S(l, {
+										size: "sm",
+										keyName: "down"
+									}),
+									$.navigate
+								]
+							}),
+							/* @__PURE__ */ C("span", {
+								className: d.hint,
+								children: [/* @__PURE__ */ S(l, {
+									size: "sm",
+									keyName: "enter"
+								}), $.select]
+							}),
+							j.length > 0 && /* @__PURE__ */ C("span", {
+								className: d.hint,
+								children: [/* @__PURE__ */ S(l, {
+									size: "sm",
+									keyName: "backspace"
+								}), $.back]
+							}),
+							/* @__PURE__ */ C("span", {
+								className: d.hint,
+								children: [/* @__PURE__ */ S(l, {
+									size: "sm",
+									keyName: "esc"
+								}), $.close]
+							})
+						]
+					}),
+					/* @__PURE__ */ S(c, {
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						children: vt
+					})
+				]
+			})]
+		})
+	});
+}
+var be = Object.assign(ye, {
+	Input: p,
+	List: ce,
+	Group: se,
+	Item: m,
+	Empty: f,
+	Loading: h,
+	Separator: _,
+	Page: g
+});
+//#endregion
+export { be as CommandPalette, f as CommandPaletteEmpty, se as CommandPaletteGroup, p as CommandPaletteInput, m as CommandPaletteItem, ce as CommandPaletteList, h as CommandPaletteLoading, g as CommandPalettePage, _ as CommandPaletteSeparator, me as defaultCommandResultsLabel, ie as defaultCommandScore };

package/dist/components/overlays/CommandPalette/CommandPalette.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_palette_176zy_35`,t=`_header_176zy_49`,n=`_crumbs_176zy_67`,r=`_trail_176zy_81`,i=`_crumb_176zy_67`,a=`_crumbSeparator_176zy_127`,o=`_back_176zy_139`,s=`_field_176zy_147`,c=`_searchIcon_176zy_159`,l=`_input_176zy_177`,u=`_inputLoading_176zy_217`,d=`_inputSpinner_176zy_247`,f=`_listArea_176zy_263`,p=`_list_176zy_263`,m=`_group_176zy_315`,h=`_separator_176zy_331`,g=`_groupHeading_176zy_347`,_=`_item_176zy_377`,v=`_icon_176zy_483`,y=`_label_176zy_501`,b=`_mark_176zy_513`,x=`_shortcut_176zy_531`,S=`_chevron_176zy_549`,C=`_status_176zy_605`,w=`_empty_176zy_613`,T=`_loading_176zy_621`,E=`_footer_176zy_645`,D=`_hint_176zy_683`,O={palette:e,header:t,crumbs:n,trail:r,crumb:i,crumbSeparator:a,back:o,field:s,searchIcon:c,input:l,inputLoading:u,inputSpinner:d,listArea:f,list:p,group:m,separator:h,groupHeading:g,item:_,icon:v,label:y,mark:b,shortcut:x,chevron:S,status:C,empty:w,loading:T,footer:E,hint:D};exports.back=o,exports.chevron=S,exports.crumb=i,exports.crumbSeparator=a,exports.crumbs=n,exports.default=O,exports.empty=w,exports.field=s,exports.footer=E,exports.group=m,exports.groupHeading=g,exports.header=t,exports.hint=D,exports.icon=v,exports.input=l,exports.inputLoading=u,exports.inputSpinner=d,exports.item=_,exports.label=y,exports.list=p,exports.listArea=f,exports.loading=T,exports.mark=b,exports.palette=e,exports.searchIcon=c,exports.separator=h,exports.shortcut=x,exports.status=C,exports.trail=r;

package/dist/components/overlays/CommandPalette/CommandPalette.module.css.mjs

@@ -0,0 +1,33 @@
+//#region src/components/overlays/CommandPalette/CommandPalette.module.css
+var e = "_palette_176zy_35", t = "_header_176zy_49", n = "_crumbs_176zy_67", r = "_trail_176zy_81", i = "_crumb_176zy_67", a = "_crumbSeparator_176zy_127", o = "_back_176zy_139", s = "_field_176zy_147", c = "_searchIcon_176zy_159", l = "_input_176zy_177", u = "_inputLoading_176zy_217", d = "_inputSpinner_176zy_247", f = "_listArea_176zy_263", p = "_list_176zy_263", m = "_group_176zy_315", h = "_separator_176zy_331", g = "_groupHeading_176zy_347", _ = "_item_176zy_377", v = "_icon_176zy_483", y = "_label_176zy_501", b = "_mark_176zy_513", x = "_shortcut_176zy_531", S = "_chevron_176zy_549", C = "_status_176zy_605", w = "_empty_176zy_613", T = "_loading_176zy_621", E = "_footer_176zy_645", D = "_hint_176zy_683", O = {
+	palette: e,
+	header: t,
+	crumbs: n,
+	trail: r,
+	crumb: i,
+	crumbSeparator: a,
+	back: o,
+	field: s,
+	searchIcon: c,
+	input: l,
+	inputLoading: u,
+	inputSpinner: d,
+	listArea: f,
+	list: p,
+	group: m,
+	separator: h,
+	groupHeading: g,
+	item: _,
+	icon: v,
+	label: y,
+	mark: b,
+	shortcut: x,
+	chevron: S,
+	status: C,
+	empty: w,
+	loading: T,
+	footer: E,
+	hint: D
+};
+//#endregion
+export { o as back, S as chevron, i as crumb, a as crumbSeparator, n as crumbs, O as default, w as empty, s as field, E as footer, m as group, g as groupHeading, t as header, D as hint, v as icon, l as input, u as inputLoading, d as inputSpinner, _ as item, y as label, p as list, f as listArea, T as loading, b as mark, e as palette, c as searchIcon, h as separator, x as shortcut, C as status, r as trail };

package/dist/components/overlays/CommandPalette/CommandPaletteContext.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=(0,e.createContext)(null);function n(n){let r=(0,e.useContext)(t);if(!r)throw Error(`<${n}> must be used inside <CommandPalette>.`);return r}var r=(0,e.createContext)(null),i=(0,e.createContext)(null);exports.CommandPaletteContext=t,exports.GroupContext=r,exports.PageContext=i,exports.useCommandPalette=n;