wimui 0.1.0

package/dist/components/navigation/Anchor/Anchor.js

@@ -0,0 +1,106 @@
+"use client";
+import e from "./anchor.module.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import i from "classnames";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/navigation/Anchor/Anchor.tsx
+var s = ({ items: s = [], bounds: c = 5, offset: l = 0, direction: u = "vertical", className: d, style: f }) => {
+	let [p, m] = r(""), [h, g] = r({}), _ = n(null), v = (e, t) => {
+		e.preventDefault();
+		let n = t.replace("#", ""), r = document.getElementById(n);
+		r && (window.scrollTo({
+			top: r.offsetTop - l,
+			behavior: "smooth"
+		}), m(t));
+	};
+	t(() => {
+		let e = () => {
+			let e = (t, n) => {
+				let r = [];
+				return t.forEach((t) => {
+					r.push({
+						href: t.href,
+						parentHref: n
+					}), t.children && (r = r.concat(e(t.children, n || t.href)));
+				}), r;
+			}, t = e(s), n = "", r = window.scrollY || document.documentElement.scrollTop, i = document.documentElement.scrollHeight, a = document.documentElement.clientHeight;
+			if (r > 0 && Math.ceil(r + a) >= i && t.length > 0) {
+				let e = t[t.length - 1];
+				n = u === "horizontal" && e.parentHref ? e.parentHref : e.href;
+			} else for (let e of t) {
+				let t = e.href.replace("#", ""), r = document.getElementById(t);
+				if (r) if (r.getBoundingClientRect().top <= l + c) n = u === "horizontal" && e.parentHref ? e.parentHref : e.href;
+				else break;
+			}
+			n && n !== p && m(n);
+		};
+		return window.addEventListener("scroll", e), e(), () => window.removeEventListener("scroll", e);
+	}, [
+		s,
+		l,
+		c,
+		p,
+		u
+	]), t(() => {
+		if (!p || !_.current) return;
+		let t = _.current.querySelector(`a[href="${p}"]`);
+		if (t) {
+			let n = _.current.getBoundingClientRect();
+			if (u === "vertical") {
+				let e = t.getBoundingClientRect();
+				g({
+					top: e.top - n.top,
+					height: e.height,
+					opacity: 1
+				});
+			} else {
+				let r = _.current.querySelector(`.${e.list}`);
+				if (r) {
+					let e = t.getBoundingClientRect(), i = r.getBoundingClientRect(), a = e.left - i.left + r.scrollLeft, o = a - i.width / 2 + e.width / 2, s = r.scrollWidth - i.width, c = Math.max(0, Math.min(o, s)), l = a - c + (i.left - n.left);
+					g({
+						left: l,
+						width: e.width,
+						opacity: 1
+					}), r.scrollTo({
+						left: c,
+						behavior: "smooth"
+					});
+				} else {
+					let e = t.getBoundingClientRect();
+					g({
+						left: e.left - _.current.getBoundingClientRect().left,
+						width: e.width,
+						opacity: 1
+					});
+				}
+			}
+		} else g({ opacity: 0 });
+	}, [p, u]);
+	let y = (t) => /* @__PURE__ */ a("ul", {
+		className: i(e.list, e[u]),
+		children: t.map((t) => /* @__PURE__ */ o("li", {
+			className: i(e.item, p === t.href && e.active),
+			children: [/* @__PURE__ */ a("a", {
+				href: t.href,
+				className: e.link,
+				onClick: (e) => v(e, t.href),
+				title: typeof t.title == "string" ? t.title : void 0,
+				children: t.title
+			}), t.children && u === "vertical" && y(t.children)]
+		}, t.key))
+	});
+	return /* @__PURE__ */ o("div", {
+		className: i("wim-anchor", e.root, e[u], d),
+		style: f,
+		ref: _,
+		children: [/* @__PURE__ */ a("div", {
+			className: e.ink,
+			children: /* @__PURE__ */ a("span", {
+				className: e.inkBall,
+				style: h
+			})
+		}), y(s)]
+	});
+};
+//#endregion
+export { s as Anchor, s as default };

package/dist/components/navigation/Anchor/anchor.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_goe7f_2`,t=`_horizontal_goe7f_8`,n=`_ink_goe7f_13`,r=`_inkBall_goe7f_20`,i=`_list_goe7f_43`,a=`_item_goe7f_62`,o=`_link_goe7f_66`,s=`_active_goe7f_74`,c={root:e,horizontal:t,ink:n,inkBall:r,list:i,item:a,link:o,active:s};exports.active=s,exports.default=c,exports.horizontal=t,exports.ink=n,exports.inkBall=r,exports.item=a,exports.link=o,exports.list=i,exports.root=e;

package/dist/components/navigation/Anchor/anchor.module.js

@@ -0,0 +1,14 @@
+"use client";
+//#region src/components/navigation/Anchor/anchor.module.scss
+var e = "_root_goe7f_2", t = "_horizontal_goe7f_8", n = "_ink_goe7f_13", r = "_inkBall_goe7f_20", i = "_list_goe7f_43", a = "_item_goe7f_62", o = "_link_goe7f_66", s = "_active_goe7f_74", c = {
+	root: e,
+	horizontal: t,
+	ink: n,
+	inkBall: r,
+	list: i,
+	item: a,
+	link: o,
+	active: s
+};
+//#endregion
+export { s as active, c as default, t as horizontal, n as ink, r as inkBall, a as item, o as link, i as list, e as root };

package/dist/components/navigation/BackTop/BackTop.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../icon/chevron-up.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("./backtop.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=o.default.forwardRef(({target:e=()=>window,visibilityHeight:l=400,onClick:u,children:d,className:f,style:p,"aria-label":m,asChild:h=!1},g)=>{let{t:_}=n.useWimTranslation(`common`),[v,y]=(0,o.useState)(!1),b=(0,o.useCallback)(e=>e===window||e instanceof Window?window.pageYOffset||document.documentElement.scrollTop:e instanceof Document?document.documentElement.scrollTop:e.scrollTop,[]),x=(0,o.useCallback)(()=>{let t=e();if(!t)return;let n=b(t);y(n>l)},[e,l,b]);(0,o.useEffect)(()=>{let t=e();if(t)return requestAnimationFrame(x),t.addEventListener(`scroll`,x),()=>{t.removeEventListener(`scroll`,x)}},[e,x]);let S=t=>{let n=e();n&&(n===window||n instanceof Window?window.scrollTo({top:0,behavior:`smooth`}):n instanceof Document?document.documentElement.scrollTo({top:0,behavior:`smooth`}):n.scrollTo({top:0,behavior:`smooth`}),u?.(t))},C=(0,c.jsx)(`div`,{className:a.default.content,children:(0,c.jsx)(i.Icon,{component:r.default,className:a.default.icon})});return(0,c.jsx)(h?t.Root:`div`,{ref:g,className:(0,s.default)(`wim-back-top`,a.default.root,!v&&a.default.hidden,f),style:p,onClick:S,role:`button`,tabIndex:0,"aria-label":m??_(`a11y.back_to_top`),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&e.currentTarget.click()},children:(0,c.jsx)(t.Slottable,{children:d||C})})});l.displayName=`BackTop`,exports.BackTop=l,exports.default=l;

package/dist/components/navigation/BackTop/BackTop.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface BackTopProps {
+    /** Target container that will be scrolled */
+    target?: () => HTMLElement | Window | Document | null;
+    /** Scroll height after which the button becomes visible */
+    visibilityHeight?: number;
+    /** Callback when clicked */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Children to be rendered inside the button */
+    children?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** Style attribute */
+    style?: React.CSSProperties;
+    /** Accessible label for the button */
+    "aria-label"?: string;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+}
+export declare const BackTop: React.ForwardRefExoticComponent<BackTopProps & React.RefAttributes<HTMLDivElement>>;
+export default BackTop;

package/dist/components/navigation/BackTop/BackTop.js

@@ -0,0 +1,63 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
+import r from "../../../icon/chevron-up.js";
+import { Icon as i } from "../../media/Icon/Icon.js";
+import a from "./backtop.module.js";
+import o, { useCallback as s, useEffect as c, useState as l } from "react";
+import u from "classnames";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/navigation/BackTop/BackTop.tsx
+var f = o.forwardRef(({ target: o = () => window, visibilityHeight: f = 400, onClick: p, children: m, className: h, style: g, "aria-label": _, asChild: v = !1 }, y) => {
+	let { t: b } = n("common"), [x, S] = l(!1), C = s((e) => e === window || e instanceof Window ? window.pageYOffset || document.documentElement.scrollTop : e instanceof Document ? document.documentElement.scrollTop : e.scrollTop, []), w = s(() => {
+		let e = o();
+		if (!e) return;
+		let t = C(e);
+		S(t > f);
+	}, [
+		o,
+		f,
+		C
+	]);
+	c(() => {
+		let e = o();
+		if (e) return requestAnimationFrame(w), e.addEventListener("scroll", w), () => {
+			e.removeEventListener("scroll", w);
+		};
+	}, [o, w]);
+	let T = (e) => {
+		let t = o();
+		t && (t === window || t instanceof Window ? window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		}) : t instanceof Document ? document.documentElement.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		}) : t.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		}), p?.(e));
+	}, E = /* @__PURE__ */ d("div", {
+		className: a.content,
+		children: /* @__PURE__ */ d(i, {
+			component: r,
+			className: a.icon
+		})
+	});
+	return /* @__PURE__ */ d(v ? e : "div", {
+		ref: y,
+		className: u("wim-back-top", a.root, !x && a.hidden, h),
+		style: g,
+		onClick: T,
+		role: "button",
+		tabIndex: 0,
+		"aria-label": _ ?? b("a11y.back_to_top"),
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && e.currentTarget.click();
+		},
+		children: /* @__PURE__ */ d(t, { children: m || E })
+	});
+});
+f.displayName = "BackTop";
+//#endregion
+export { f as BackTop, f as default };

package/dist/components/navigation/BackTop/backtop.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1wkes_3`,t=`_hidden_1wkes_13`,n=`_content_1wkes_18`,r=`_icon_1wkes_34`,i={root:e,hidden:t,content:n,icon:r};exports.content=n,exports.default=i,exports.hidden=t,exports.icon=r,exports.root=e;

package/dist/components/navigation/BackTop/backtop.module.js

@@ -0,0 +1,10 @@
+"use client";
+//#region src/components/navigation/BackTop/backtop.module.scss
+var e = "_root_1wkes_3", t = "_hidden_1wkes_13", n = "_content_1wkes_18", r = "_icon_1wkes_34", i = {
+	root: e,
+	hidden: t,
+	content: n,
+	icon: r
+};
+//#endregion
+export { n as content, i as default, t as hidden, r as icon, e as root };

package/dist/components/navigation/Breadcrumb/Breadcrumb.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../icon/chevron-right.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("./breadcrumb.module.cjs"),o=require("../Link/Link.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=(0,s.forwardRef)(({items:e,separator:s,size:u=`md`,className:d,ariaLabel:f,asChild:p,...m},h)=>{let{t:g}=n.useWimTranslation(`common`),_=f??g(`a11y.breadcrumb`),v=p?t.Root:`nav`,y=(0,l.jsx)(i.Icon,{component:r.default,size:u,className:a.default.separatorIcon});return(0,l.jsx)(v,{ref:h,"aria-label":_,className:(0,c.default)(`wim-breadcrumb`,a.default.root,a.default[u],d),onKeyDown:e=>{let t=e.currentTarget,n=Array.from(t.querySelectorAll(`.${a.default.link}, .${a.default.label}.${a.default.current}`)),r=n.indexOf(document.activeElement);r!==-1&&(e.key===`ArrowRight`?(e.preventDefault(),n[(r+1)%n.length].focus()):e.key===`ArrowLeft`&&(e.preventDefault(),n[(r-1+n.length)%n.length].focus()))},...m,children:(0,l.jsx)(`ol`,{className:a.default.list,children:e.map((t,n)=>{let r=n===e.length-1;return(0,l.jsxs)(`li`,{className:a.default.item,children:[(0,l.jsx)(`div`,{className:a.default.content,children:t.href&&!r?(0,l.jsx)(o.Link,{href:t.href,size:u,priority:`secondary`,iconName:t.iconName,className:a.default.link,styles:{label:a.default.linkLabel},children:t.label}):(0,l.jsxs)(`span`,{className:(0,c.default)(a.default.label,r&&a.default.current),"aria-current":r?`page`:void 0,tabIndex:r?0:void 0,role:r?`link`:void 0,children:[t.iconName&&(0,l.jsx)(i.Icon,{name:t.iconName,size:u,className:a.default.labelIcon}),t.label]})}),!r&&(0,l.jsx)(`span`,{className:a.default.separator,"aria-hidden":`true`,children:s||y})]},n)})})})});u.displayName=`Breadcrumb`,exports.Breadcrumb=u;

package/dist/components/navigation/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { Icon } from '../../media/Icon/Icon';
+import { ComponentSizeBasic } from '../../../types/tokens';
+type BreadcrumbItem = {
+    label: React.ReactNode;
+    href?: string;
+    iconName?: React.ComponentProps<typeof Icon>["name"];
+};
+type BreadcrumbProps = {
+    /**
+     * Items to display, from the root to the current page.
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Separator displayed between items. Defaults to a chevron icon.
+     */
+    separator?: React.ReactNode;
+    /**
+     * Size of the breadcrumb.
+     * @default "md"
+     */
+    size?: ComponentSizeBasic;
+    /**
+     * Additional CSS class name for the container.
+     */
+    className?: string;
+    /**
+     * Accessible label of the navigation landmark. Defaults to a localized "breadcrumb" label.
+     */
+    ariaLabel?: string;
+    /**
+     * If true, the breadcrumb will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+};
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/navigation/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,66 @@
+"use client";
+import { Root as e } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { useWimTranslation as t } from "../../../i18n/useWimTranslation.js";
+import n from "../../../icon/chevron-right.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
+import i from "./breadcrumb.module.js";
+import { Link as a } from "../Link/Link.js";
+import { forwardRef as o } from "react";
+import s from "classnames";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/navigation/Breadcrumb/Breadcrumb.tsx
+var u = o(({ items: o, separator: u, size: d = "md", className: f, ariaLabel: p, asChild: m, ...h }, g) => {
+	let { t: _ } = t("common"), v = p ?? _("a11y.breadcrumb"), y = m ? e : "nav", b = /* @__PURE__ */ c(r, {
+		component: n,
+		size: d,
+		className: i.separatorIcon
+	});
+	return /* @__PURE__ */ c(y, {
+		ref: g,
+		"aria-label": v,
+		className: s("wim-breadcrumb", i.root, i[d], f),
+		onKeyDown: (e) => {
+			let t = e.currentTarget, n = Array.from(t.querySelectorAll(`.${i.link}, .${i.label}.${i.current}`)), r = n.indexOf(document.activeElement);
+			r !== -1 && (e.key === "ArrowRight" ? (e.preventDefault(), n[(r + 1) % n.length].focus()) : e.key === "ArrowLeft" && (e.preventDefault(), n[(r - 1 + n.length) % n.length].focus()));
+		},
+		...h,
+		children: /* @__PURE__ */ c("ol", {
+			className: i.list,
+			children: o.map((e, t) => {
+				let n = t === o.length - 1;
+				return /* @__PURE__ */ l("li", {
+					className: i.item,
+					children: [/* @__PURE__ */ c("div", {
+						className: i.content,
+						children: e.href && !n ? /* @__PURE__ */ c(a, {
+							href: e.href,
+							size: d,
+							priority: "secondary",
+							iconName: e.iconName,
+							className: i.link,
+							styles: { label: i.linkLabel },
+							children: e.label
+						}) : /* @__PURE__ */ l("span", {
+							className: s(i.label, n && i.current),
+							"aria-current": n ? "page" : void 0,
+							tabIndex: n ? 0 : void 0,
+							role: n ? "link" : void 0,
+							children: [e.iconName && /* @__PURE__ */ c(r, {
+								name: e.iconName,
+								size: d,
+								className: i.labelIcon
+							}), e.label]
+						})
+					}), !n && /* @__PURE__ */ c("span", {
+						className: i.separator,
+						"aria-hidden": "true",
+						children: u || b
+					})]
+				}, t);
+			})
+		})
+	});
+});
+u.displayName = "Breadcrumb";
+//#endregion
+export { u as Breadcrumb };

package/dist/components/navigation/Breadcrumb/breadcrumb.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1s139_2`,t=`_list_1s139_5`,n=`_item_1s139_14`,r=`_content_1s139_18`,i=`_link_1s139_22`,a=`_linkLabel_1s139_25`,o=`_label_1s139_28`,s=`_current_1s139_34`,c=`_labelIcon_1s139_38`,l=`_separator_1s139_41`,u=`_separatorIcon_1s139_48`,d=`_lg_1s139_52`,f=`_md_1s139_58`,p=`_sm_1s139_61`,m={root:e,list:t,item:n,content:r,link:i,linkLabel:a,label:o,current:s,labelIcon:c,separator:l,separatorIcon:u,lg:d,md:f,sm:p};exports.content=r,exports.current=s,exports.default=m,exports.item=n,exports.label=o,exports.labelIcon=c,exports.lg=d,exports.link=i,exports.linkLabel=a,exports.list=t,exports.md=f,exports.root=e,exports.separator=l,exports.separatorIcon=u,exports.sm=p;

package/dist/components/navigation/Breadcrumb/breadcrumb.module.js

@@ -0,0 +1,20 @@
+"use client";
+//#region src/components/navigation/Breadcrumb/breadcrumb.module.scss
+var e = "_root_1s139_2", t = "_list_1s139_5", n = "_item_1s139_14", r = "_content_1s139_18", i = "_link_1s139_22", a = "_linkLabel_1s139_25", o = "_label_1s139_28", s = "_current_1s139_34", c = "_labelIcon_1s139_38", l = "_separator_1s139_41", u = "_separatorIcon_1s139_48", d = "_lg_1s139_52", f = "_md_1s139_58", p = "_sm_1s139_61", m = {
+	root: e,
+	list: t,
+	item: n,
+	content: r,
+	link: i,
+	linkLabel: a,
+	label: o,
+	current: s,
+	labelIcon: c,
+	separator: l,
+	separatorIcon: u,
+	lg: d,
+	md: f,
+	sm: p
+};
+//#endregion
+export { r as content, s as current, m as default, n as item, o as label, c as labelIcon, d as lg, i as link, a as linkLabel, t as list, f as md, e as root, l as separator, u as separatorIcon, p as sm };

package/dist/components/navigation/CommandPalette/CommandPalette.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../overlay/Portal/Portal.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../../../icon/search.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("../../_internal/BaseListItem/BaseListItem.cjs"),c=require("./command-palette.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=(0,l.createContext)(void 0),p=()=>{let e=(0,l.useContext)(f);if(!e)throw Error(`CommandPalette sub-components must be used within a CommandPalette`);return e},m=({children:e,open:t,onOpenChange:n})=>{let[r,i]=(0,l.useState)(!1),[a,o]=(0,l.useState)(``),[s,c]=(0,l.useState)(0),[u,p]=(0,l.useState)(!1),m=(0,l.useRef)(0),h=t!==void 0,g=h?t:r,_=(0,l.useCallback)(e=>{h||i(e),n?.(e),e||(o(``),c(0))},[h,n]),v=(0,l.useCallback)(()=>{let e=m.current;return m.current+=1,e},[]),y=(0,l.useCallback)(()=>{--m.current},[]);m.current=0,(0,l.useEffect)(()=>{let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`k`&&(e.preventDefault(),p(!0),_(!g)),e.key===`Escape`&&g&&_(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[g,_]);let b=l.default.useMemo(()=>({open:g,onOpenChange:_,search:a,setSearch:o,activeIndex:s,setActiveIndex:c,registerItem:v,unregisterItem:y,isKeyboardNavigating:u,setIsKeyboardNavigating:p}),[g,_,a,s,v,y,u]);return(0,d.jsx)(f.Provider,{value:b,children:e})},h=({children:e,asChild:t,className:n})=>{let{onOpenChange:r,setIsKeyboardNavigating:i}=p(),a=e=>{i(e.detail===0),r(!0)};return t&&l.default.isValidElement(e)?l.default.cloneElement(e,{onClick:t=>{e.props.onClick?.(t),a(t)},className:(0,u.default)(n,e.props.className)}):(0,d.jsx)(`button`,{className:(0,u.default)(c.default.trigger,n),onClick:a,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&i(!0)},children:e})},g=({children:e,className:t})=>{let{open:a,onOpenChange:o,activeIndex:s,setActiveIndex:f,isKeyboardNavigating:m,setIsKeyboardNavigating:h}=p(),g=(0,l.useRef)(null);return(0,d.jsx)(n.Portal,{children:(0,d.jsx)(r.Transition,{show:a,preset:`fade`,children:(0,d.jsx)(`div`,{role:`presentation`,className:c.default.overlay,onClick:e=>{e.target===e.currentTarget&&o(!1)},children:(0,d.jsx)(r.Transition,{show:a,preset:`scale`,children:(0,d.jsx)(i.FocusTrap,{active:a,children:(0,d.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,className:(0,u.default)(`wim-command-palette`,c.default.content,t),onClick:e=>e.stopPropagation(),onMouseMove:e=>{if(!g.current){g.current={x:e.clientX,y:e.clientY};return}Math.sqrt((e.clientX-g.current.x)**2+(e.clientY-g.current.y)**2)>10&&h(!1),g.current={x:e.clientX,y:e.clientY}},"data-keyboard-nav":m,onKeyDown:e=>{h(!0);let t=e.currentTarget.querySelectorAll(`.${c.default.item}:not([aria-disabled="true"])`).length;t!==0&&(e.key===`ArrowDown`?(e.preventDefault(),f(e=>(e+1)%t)):e.key===`ArrowUp`?(e.preventDefault(),f(e=>(e-1+t)%t)):e.key===`Home`?(e.preventDefault(),f(0)):e.key===`End`?(e.preventDefault(),f(t-1)):e.key===`Enter`&&(e.preventDefault(),document.getElementById(`wim-command-palette-item-${s}`)?.click()))},children:e})})})})})})},_=({placeholder:e,value:t,onChange:n,rightSection:r})=>{let{search:i,setSearch:s,setActiveIndex:u,activeIndex:f}=p(),m=(0,l.useRef)(null);return(0,l.useEffect)(()=>{m.current?.focus()},[]),(0,d.jsxs)(`div`,{className:c.default.inputWrapper,children:[(0,d.jsx)(o.Icon,{component:a.default,size:`sm`}),(0,d.jsx)(`input`,{ref:m,className:c.default.input,placeholder:e,value:t??i,onChange:e=>{let t=e.target.value;s(t),u(0),n?.(t)},role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":!0,"aria-controls":`wim-command-palette-listbox`,"aria-activedescendant":`wim-command-palette-item-${f}`}),r&&(0,d.jsx)(`div`,{className:c.default.inputRight,children:r})]})},v=({children:e})=>(0,d.jsx)(`div`,{className:c.default.list,role:`listbox`,id:`wim-command-palette-listbox`,children:e}),y=({children:e,heading:t})=>(0,d.jsxs)(`div`,{className:c.default.group,children:[t&&(0,d.jsx)(`div`,{className:c.default.groupHeading,children:t}),e]}),b=({children:e,onSelect:t,icon:n,shortcut:r,disabled:i})=>{let{activeIndex:a,setActiveIndex:o,registerItem:u,onOpenChange:f}=p(),[m]=(0,l.useState)(()=>u()),h=a===m;return(0,l.useEffect)(()=>{h&&!i&&document.getElementById(`wim-command-palette-item-${m}`)?.scrollIntoView({block:`nearest`})},[h,i,m]),(0,d.jsx)(s.BaseListItem,{role:`option`,id:`wim-command-palette-item-${m}`,"aria-selected":h,className:c.default.item,active:h,disabled:i,icon:n,rightSection:r&&(0,d.jsx)(`div`,{className:c.default.shortcut,children:r.map(e=>(0,d.jsx)(`kbd`,{className:c.default.kbd,children:e},e))}),onMouseEnter:()=>!i&&o(m),onClick:()=>{i||(t?.(),f(!1))},children:e})},x=({children:e})=>{let{t:n}=t.useWimTranslation(`components`),r=e??n(`command_palette.no_results`),{open:i,search:a}=p(),[o,s]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{if(i){let e=setTimeout(()=>{let e=document.querySelectorAll(`.${c.default.item}`);s(e.length===0)},0);return()=>clearTimeout(e)}},[i,a]),!i||!o?null:(0,d.jsx)(`div`,{className:c.default.empty,children:r})},S=({children:e})=>(0,d.jsx)(`div`,{className:c.default.footer,children:e});exports.CommandPalette=m,exports.CommandPaletteContent=g,exports.CommandPaletteEmpty=x,exports.CommandPaletteFooter=S,exports.CommandPaletteGroup=y,exports.CommandPaletteInput=_,exports.CommandPaletteItem=b,exports.CommandPaletteList=v,exports.CommandPaletteTrigger=h;

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

@@ -0,0 +1,55 @@
+import { default as React, ReactNode } from 'react';
+export interface CommandPaletteProps {
+    /**
+     * Palette parts (CommandPaletteTrigger, CommandPaletteContent, etc.).
+     */
+    children: ReactNode;
+    /**
+     * Controlled open state. Use together with onOpenChange.
+     */
+    open?: boolean;
+    /**
+     * Called with the next state when the palette is opened or closed.
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const CommandPalette: ({ children, open: controlledOpen, onOpenChange, }: CommandPaletteProps) => React.JSX.Element;
+export interface CommandPaletteTriggerProps {
+    children: ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+export declare const CommandPaletteTrigger: ({ children, asChild, className, }: CommandPaletteTriggerProps) => React.JSX.Element;
+export interface CommandPaletteContentProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const CommandPaletteContent: ({ children, className, }: CommandPaletteContentProps) => React.JSX.Element;
+export interface CommandPaletteInputProps {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    rightSection?: ReactNode;
+}
+export declare const CommandPaletteInput: ({ placeholder, value, onChange, rightSection, }: CommandPaletteInputProps) => React.JSX.Element;
+export declare const CommandPaletteList: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export declare const CommandPaletteGroup: ({ children, heading, }: {
+    children: ReactNode;
+    heading?: string;
+}) => React.JSX.Element;
+export interface CommandPaletteItemProps {
+    children: ReactNode;
+    onSelect?: () => void;
+    icon?: ReactNode;
+    shortcut?: string[];
+    disabled?: boolean;
+}
+export declare const CommandPaletteItem: ({ children, onSelect, icon, shortcut, disabled, }: CommandPaletteItemProps) => React.JSX.Element;
+export declare const CommandPaletteEmpty: ({ children, }: {
+    children?: ReactNode;
+}) => React.JSX.Element | null;
+export declare const CommandPaletteFooter: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/dist/components/navigation/CommandPalette/CommandPalette.js

@@ -0,0 +1,211 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { Portal as t } from "../../overlay/Portal/Portal.js";
+import { Transition as n } from "../../layout/Transition/Transition.js";
+import { FocusTrap as r } from "../../overlay/FocusTrap/FocusTrap.js";
+import i from "../../../icon/search.js";
+import { Icon as a } from "../../media/Icon/Icon.js";
+import { BaseListItem as o } from "../../_internal/BaseListItem/BaseListItem.js";
+import s from "./command-palette.module.js";
+import c, { createContext as l, useCallback as u, useContext as d, useEffect as f, useRef as p, useState as m } from "react";
+import h from "classnames";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/navigation/CommandPalette/CommandPalette.tsx
+var v = l(void 0), y = () => {
+	let e = d(v);
+	if (!e) throw Error("CommandPalette sub-components must be used within a CommandPalette");
+	return e;
+}, b = ({ children: e, open: t, onOpenChange: n }) => {
+	let [r, i] = m(!1), [a, o] = m(""), [s, l] = m(0), [d, h] = m(!1), _ = p(0), y = t !== void 0, b = y ? t : r, x = u((e) => {
+		y || i(e), n?.(e), e || (o(""), l(0));
+	}, [y, n]), S = u(() => {
+		let e = _.current;
+		return _.current += 1, e;
+	}, []), C = u(() => {
+		--_.current;
+	}, []);
+	_.current = 0, f(() => {
+		let e = (e) => {
+			(e.metaKey || e.ctrlKey) && e.key === "k" && (e.preventDefault(), h(!0), x(!b)), e.key === "Escape" && b && x(!1);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [b, x]);
+	let w = c.useMemo(() => ({
+		open: b,
+		onOpenChange: x,
+		search: a,
+		setSearch: o,
+		activeIndex: s,
+		setActiveIndex: l,
+		registerItem: S,
+		unregisterItem: C,
+		isKeyboardNavigating: d,
+		setIsKeyboardNavigating: h
+	}), [
+		b,
+		x,
+		a,
+		s,
+		S,
+		C,
+		d
+	]);
+	return /* @__PURE__ */ g(v.Provider, {
+		value: w,
+		children: e
+	});
+}, x = ({ children: e, asChild: t, className: n }) => {
+	let { onOpenChange: r, setIsKeyboardNavigating: i } = y(), a = (e) => {
+		i(e.detail === 0), r(!0);
+	};
+	return t && c.isValidElement(e) ? c.cloneElement(e, {
+		onClick: (t) => {
+			e.props.onClick?.(t), a(t);
+		},
+		className: h(n, e.props.className)
+	}) : /* @__PURE__ */ g("button", {
+		className: h(s.trigger, n),
+		onClick: a,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && i(!0);
+		},
+		children: e
+	});
+}, S = ({ children: e, className: i }) => {
+	let { open: a, onOpenChange: o, activeIndex: c, setActiveIndex: l, isKeyboardNavigating: u, setIsKeyboardNavigating: d } = y(), f = p(null);
+	return /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(n, {
+		show: a,
+		preset: "fade",
+		children: /* @__PURE__ */ g("div", {
+			role: "presentation",
+			className: s.overlay,
+			onClick: (e) => {
+				e.target === e.currentTarget && o(!1);
+			},
+			children: /* @__PURE__ */ g(n, {
+				show: a,
+				preset: "scale",
+				children: /* @__PURE__ */ g(r, {
+					active: a,
+					children: /* @__PURE__ */ g("div", {
+						role: "dialog",
+						"aria-modal": "true",
+						className: h("wim-command-palette", s.content, i),
+						onClick: (e) => e.stopPropagation(),
+						onMouseMove: (e) => {
+							if (!f.current) {
+								f.current = {
+									x: e.clientX,
+									y: e.clientY
+								};
+								return;
+							}
+							Math.sqrt((e.clientX - f.current.x) ** 2 + (e.clientY - f.current.y) ** 2) > 10 && d(!1), f.current = {
+								x: e.clientX,
+								y: e.clientY
+							};
+						},
+						"data-keyboard-nav": u,
+						onKeyDown: (e) => {
+							d(!0);
+							let t = e.currentTarget.querySelectorAll(`.${s.item}:not([aria-disabled="true"])`).length;
+							t !== 0 && (e.key === "ArrowDown" ? (e.preventDefault(), l((e) => (e + 1) % t)) : e.key === "ArrowUp" ? (e.preventDefault(), l((e) => (e - 1 + t) % t)) : e.key === "Home" ? (e.preventDefault(), l(0)) : e.key === "End" ? (e.preventDefault(), l(t - 1)) : e.key === "Enter" && (e.preventDefault(), document.getElementById(`wim-command-palette-item-${c}`)?.click()));
+						},
+						children: e
+					})
+				})
+			})
+		})
+	}) });
+}, C = ({ placeholder: e, value: t, onChange: n, rightSection: r }) => {
+	let { search: o, setSearch: c, setActiveIndex: l, activeIndex: u } = y(), d = p(null);
+	return f(() => {
+		d.current?.focus();
+	}, []), /* @__PURE__ */ _("div", {
+		className: s.inputWrapper,
+		children: [
+			/* @__PURE__ */ g(a, {
+				component: i,
+				size: "sm"
+			}),
+			/* @__PURE__ */ g("input", {
+				ref: d,
+				className: s.input,
+				placeholder: e,
+				value: t ?? o,
+				onChange: (e) => {
+					let t = e.target.value;
+					c(t), l(0), n?.(t);
+				},
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": !0,
+				"aria-controls": "wim-command-palette-listbox",
+				"aria-activedescendant": `wim-command-palette-item-${u}`
+			}),
+			r && /* @__PURE__ */ g("div", {
+				className: s.inputRight,
+				children: r
+			})
+		]
+	});
+}, w = ({ children: e }) => /* @__PURE__ */ g("div", {
+	className: s.list,
+	role: "listbox",
+	id: "wim-command-palette-listbox",
+	children: e
+}), T = ({ children: e, heading: t }) => /* @__PURE__ */ _("div", {
+	className: s.group,
+	children: [t && /* @__PURE__ */ g("div", {
+		className: s.groupHeading,
+		children: t
+	}), e]
+}), E = ({ children: e, onSelect: t, icon: n, shortcut: r, disabled: i }) => {
+	let { activeIndex: a, setActiveIndex: c, registerItem: l, onOpenChange: u } = y(), [d] = m(() => l()), p = a === d;
+	return f(() => {
+		p && !i && document.getElementById(`wim-command-palette-item-${d}`)?.scrollIntoView({ block: "nearest" });
+	}, [
+		p,
+		i,
+		d
+	]), /* @__PURE__ */ g(o, {
+		role: "option",
+		id: `wim-command-palette-item-${d}`,
+		"aria-selected": p,
+		className: s.item,
+		active: p,
+		disabled: i,
+		icon: n,
+		rightSection: r && /* @__PURE__ */ g("div", {
+			className: s.shortcut,
+			children: r.map((e) => /* @__PURE__ */ g("kbd", {
+				className: s.kbd,
+				children: e
+			}, e))
+		}),
+		onMouseEnter: () => !i && c(d),
+		onClick: () => {
+			i || (t?.(), u(!1));
+		},
+		children: e
+	});
+}, D = ({ children: t }) => {
+	let { t: n } = e("components"), r = t ?? n("command_palette.no_results"), { open: i, search: a } = y(), [o, c] = m(!1);
+	return f(() => {
+		if (i) {
+			let e = setTimeout(() => {
+				let e = document.querySelectorAll(`.${s.item}`);
+				c(e.length === 0);
+			}, 0);
+			return () => clearTimeout(e);
+		}
+	}, [i, a]), !i || !o ? null : /* @__PURE__ */ g("div", {
+		className: s.empty,
+		children: r
+	});
+}, O = ({ children: e }) => /* @__PURE__ */ g("div", {
+	className: s.footer,
+	children: e
+});
+//#endregion
+export { b as CommandPalette, S as CommandPaletteContent, D as CommandPaletteEmpty, O as CommandPaletteFooter, T as CommandPaletteGroup, C as CommandPaletteInput, E as CommandPaletteItem, w as CommandPaletteList, x as CommandPaletteTrigger };

package/dist/components/navigation/CommandPalette/command-palette.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_overlay_14537_3`,t=`_content_14537_19`,n=`_slideIn_14537_1`,r=`_inputWrapper_14537_48`,i=`_inputRight_14537_73`,a=`_input_14537_48`,o=`_list_14537_92`,s=`_group_14537_102`,c=`_groupHeading_14537_108`,l=`_item_14537_116`,u=`_active_14537_119`,d=`_shortcut_14537_123`,f=`_empty_14537_132`,p=`_footer_14537_138`,m=`_kbd_14537_152`,h=`_trigger_14537_161`,g={overlay:e,content:t,slideIn:n,inputWrapper:r,inputRight:i,input:a,list:o,group:s,groupHeading:c,item:l,active:u,shortcut:d,empty:f,footer:p,kbd:m,trigger:h};exports.active=u,exports.content=t,exports.default=g,exports.empty=f,exports.footer=p,exports.group=s,exports.groupHeading=c,exports.input=a,exports.inputRight=i,exports.inputWrapper=r,exports.item=l,exports.kbd=m,exports.list=o,exports.overlay=e,exports.shortcut=d,exports.slideIn=n,exports.trigger=h;