wimui 0.1.0

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

@@ -0,0 +1,22 @@
+"use client";
+//#region src/components/navigation/CommandPalette/command-palette.module.scss
+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
+};
+//#endregion
+export { u as active, t as content, g as default, f as empty, p as footer, s as group, c as groupHeading, a as input, i as inputRight, r as inputWrapper, l as item, m as kbd, o as list, e as overlay, d as shortcut, n as slideIn, h as trigger };

package/dist/components/navigation/HamburgerMenu/HamburgerMenu.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("./hamburger-menu.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=i.default.forwardRef(({asChild:e=!1,open:i=!1,onClick:s,size:c=`md`,color:l,visibleBelow:u,className:d,style:f,children:p,"aria-label":m,...h},g)=>{let{t:_}=n.useWimTranslation(`common`);return(0,o.jsxs)(e?t.Root:`button`,{ref:g,type:e?void 0:`button`,className:(0,a.default)(`wim-hamburger-menu`,r.default.root,r.default[c],i&&r.default.open,u&&r.default[`visibleBelow${u.charAt(0).toUpperCase()}${u.slice(1)}`],d),onClick:s,"aria-expanded":i,"aria-label":m??_(i?`a11y.close_menu`:`a11y.open_menu`),style:{...f,...l?{"--wim-hamburger-color":l}:{}},...h,children:[(0,o.jsx)(`div`,{className:r.default.box,children:(0,o.jsx)(`div`,{className:r.default.inner})}),e?(0,o.jsx)(t.Slottable,{children:p}):null]})});s.displayName=`HamburgerMenu`,exports.HamburgerMenu=s;

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export type HamburgerMenuVisibleBelow = "xs" | "sm" | "md" | "lg" | "xl";
+export interface HamburgerMenuProps extends React.ComponentPropsWithoutRef<"button"> {
+    /**
+     * If true, merge button props onto the child element.
+     */
+    asChild?: boolean;
+    /** Whether the menu is open */
+    open?: boolean;
+    /** Callback function when the menu is toggled */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Size of the hamburger menu */
+    size?: ComponentSizeBasic;
+    /** Color of the bars */
+    color?: string;
+    /** Show only below the given breakpoint (e.g. "md" matches Sidebar's mobile drawer range) */
+    visibleBelow?: HamburgerMenuVisibleBelow;
+    /** Custom class name */
+    className?: string;
+}
+export declare const HamburgerMenu: React.ForwardRefExoticComponent<HamburgerMenuProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/navigation/HamburgerMenu/HamburgerMenu.js

@@ -0,0 +1,31 @@
+"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 "./hamburger-menu.module.js";
+import i from "react";
+import a from "classnames";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/navigation/HamburgerMenu/HamburgerMenu.tsx
+var c = i.forwardRef(({ asChild: i = !1, open: c = !1, onClick: l, size: u = "md", color: d, visibleBelow: f, className: p, style: m, children: h, "aria-label": g, ..._ }, v) => {
+	let { t: y } = n("common");
+	return /* @__PURE__ */ s(i ? e : "button", {
+		ref: v,
+		type: i ? void 0 : "button",
+		className: a("wim-hamburger-menu", r.root, r[u], c && r.open, f && r[`visibleBelow${f.charAt(0).toUpperCase()}${f.slice(1)}`], p),
+		onClick: l,
+		"aria-expanded": c,
+		"aria-label": g ?? y(c ? "a11y.close_menu" : "a11y.open_menu"),
+		style: {
+			...m,
+			...d ? { "--wim-hamburger-color": d } : {}
+		},
+		..._,
+		children: [/* @__PURE__ */ o("div", {
+			className: r.box,
+			children: /* @__PURE__ */ o("div", { className: r.inner })
+		}), i ? /* @__PURE__ */ o(t, { children: h }) : null]
+	});
+});
+c.displayName = "HamburgerMenu";
+//#endregion
+export { c as HamburgerMenu };

package/dist/components/navigation/HamburgerMenu/hamburger-menu.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_prvt2_5`,t=`_box_prvt2_22`,n=`_inner_prvt2_28`,r=`_sm_prvt2_53`,i=`_lg_prvt2_69`,a=`_visibleBelowXs_prvt2_88`,o=`_visibleBelowSm_prvt2_96`,s=`_visibleBelowMd_prvt2_104`,c=`_visibleBelowLg_prvt2_112`,l=`_visibleBelowXl_prvt2_120`,u=`_open_prvt2_128`,d={root:e,box:t,inner:n,sm:r,lg:i,visibleBelowXs:a,visibleBelowSm:o,visibleBelowMd:s,visibleBelowLg:c,visibleBelowXl:l,open:u};exports.box=t,exports.default=d,exports.inner=n,exports.lg=i,exports.open=u,exports.root=e,exports.sm=r,exports.visibleBelowLg=c,exports.visibleBelowMd=s,exports.visibleBelowSm=o,exports.visibleBelowXl=l,exports.visibleBelowXs=a;

package/dist/components/navigation/HamburgerMenu/hamburger-menu.module.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/components/navigation/HamburgerMenu/hamburger-menu.module.scss
+var e = "_root_prvt2_5", t = "_box_prvt2_22", n = "_inner_prvt2_28", r = "_sm_prvt2_53", i = "_lg_prvt2_69", a = "_visibleBelowXs_prvt2_88", o = "_visibleBelowSm_prvt2_96", s = "_visibleBelowMd_prvt2_104", c = "_visibleBelowLg_prvt2_112", l = "_visibleBelowXl_prvt2_120", u = "_open_prvt2_128", d = {
+	root: e,
+	box: t,
+	inner: n,
+	sm: r,
+	lg: i,
+	visibleBelowXs: a,
+	visibleBelowSm: o,
+	visibleBelowMd: s,
+	visibleBelowLg: c,
+	visibleBelowXl: l,
+	open: u
+};
+//#endregion
+export { t as box, d as default, n as inner, i as lg, u as open, e as root, r as sm, c as visibleBelowLg, s as visibleBelowMd, o as visibleBelowSm, l as visibleBelowXl, a as visibleBelowXs };

package/dist/components/navigation/KeyboardShortcuts/KeyboardShortcuts.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Kbd/Kbd.cjs"),n=require("./keyboard-shortcuts.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=r.default.forwardRef(({shortcuts:e,title:o,separator:s=`+`,size:c=`md`,className:l,...u},d)=>(0,a.jsxs)(`div`,{className:(0,i.default)(`wim-keyboard-shortcuts`,n.default.root,n.default[c],l),children:[o&&(0,a.jsx)(`p`,{className:n.default.title,children:o}),(0,a.jsx)(`dl`,{ref:d,className:n.default.list,...u,children:e.map((e,i)=>(0,a.jsxs)(`div`,{className:n.default.item,children:[(0,a.jsx)(`dt`,{className:n.default.label,children:e.label}),(0,a.jsx)(`dd`,{className:n.default.keys,children:e.keys.map((e,i)=>(0,a.jsxs)(r.default.Fragment,{children:[i>0&&(0,a.jsx)(`span`,{className:n.default.separator,"aria-hidden":`true`,children:s}),(0,a.jsx)(t.Kbd,{size:c,children:e})]},i))})]},i))})]}));o.displayName=`KeyboardShortcuts`,exports.KeyboardShortcuts=o;

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

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export type ShortcutItem = {
+    /** Description label of the shortcut */
+    label: string;
+    /** Keys of the shortcut (e.g. ["Ctrl", "K"]) */
+    keys: string[];
+};
+export type KeyboardShortcutsProps = React.ComponentPropsWithoutRef<"dl"> & {
+    /** List of shortcuts to display */
+    shortcuts: ShortcutItem[];
+    /** Section title */
+    title?: string;
+    /**
+     * Separator displayed between keys
+     * @default "+"
+     */
+    separator?: string;
+    /**
+     * Size of the list
+     * @default "md"
+     */
+    size?: ComponentSizeBasic;
+};
+/**
+ * Displays a list of keyboard shortcuts.
+ */
+export declare const KeyboardShortcuts: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref"> & {
+    /** List of shortcuts to display */
+    shortcuts: ShortcutItem[];
+    /** Section title */
+    title?: string;
+    /**
+     * Separator displayed between keys
+     * @default "+"
+     */
+    separator?: string;
+    /**
+     * Size of the list
+     * @default "md"
+     */
+    size?: ComponentSizeBasic;
+} & React.RefAttributes<HTMLDListElement>>;

package/dist/components/navigation/KeyboardShortcuts/KeyboardShortcuts.js

@@ -0,0 +1,38 @@
+"use client";
+import { Kbd as e } from "../../typography/Kbd/Kbd.js";
+import t from "./keyboard-shortcuts.module.js";
+import n from "react";
+import r from "classnames";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/navigation/KeyboardShortcuts/KeyboardShortcuts.tsx
+var o = n.forwardRef(({ shortcuts: o, title: s, separator: c = "+", size: l = "md", className: u, ...d }, f) => /* @__PURE__ */ a("div", {
+	className: r("wim-keyboard-shortcuts", t.root, t[l], u),
+	children: [s && /* @__PURE__ */ i("p", {
+		className: t.title,
+		children: s
+	}), /* @__PURE__ */ i("dl", {
+		ref: f,
+		className: t.list,
+		...d,
+		children: o.map((r, o) => /* @__PURE__ */ a("div", {
+			className: t.item,
+			children: [/* @__PURE__ */ i("dt", {
+				className: t.label,
+				children: r.label
+			}), /* @__PURE__ */ i("dd", {
+				className: t.keys,
+				children: r.keys.map((r, o) => /* @__PURE__ */ a(n.Fragment, { children: [o > 0 && /* @__PURE__ */ i("span", {
+					className: t.separator,
+					"aria-hidden": "true",
+					children: c
+				}), /* @__PURE__ */ i(e, {
+					size: l,
+					children: r
+				})] }, o))
+			})]
+		}, o))
+	})]
+}));
+o.displayName = "KeyboardShortcuts";
+//#endregion
+export { o as KeyboardShortcuts };

package/dist/components/navigation/KeyboardShortcuts/keyboard-shortcuts.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1u5zu_3`,t=`_title_1u5zu_9`,n=`_list_1u5zu_18`,r=`_item_1u5zu_26`,i=`_label_1u5zu_38`,a=`_keys_1u5zu_43`,o=`_separator_1u5zu_51`,s=`_sm_1u5zu_57`,c=`_lg_1u5zu_67`,l={root:e,title:t,list:n,item:r,label:i,keys:a,separator:o,sm:s,lg:c};exports.default=l,exports.item=r,exports.keys=a,exports.label=i,exports.lg=c,exports.list=n,exports.root=e,exports.separator=o,exports.sm=s,exports.title=t;

package/dist/components/navigation/KeyboardShortcuts/keyboard-shortcuts.module.js

@@ -0,0 +1,15 @@
+"use client";
+//#region src/components/navigation/KeyboardShortcuts/keyboard-shortcuts.module.scss
+var e = "_root_1u5zu_3", t = "_title_1u5zu_9", n = "_list_1u5zu_18", r = "_item_1u5zu_26", i = "_label_1u5zu_38", a = "_keys_1u5zu_43", o = "_separator_1u5zu_51", s = "_sm_1u5zu_57", c = "_lg_1u5zu_67", l = {
+	root: e,
+	title: t,
+	list: n,
+	item: r,
+	label: i,
+	keys: a,
+	separator: o,
+	sm: s,
+	lg: c
+};
+//#endregion
+export { l as default, r as item, a as keys, i as label, c as lg, n as list, e as root, o as separator, s as sm, t as title };

package/dist/components/navigation/Link/Link.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("../../../icon/external-link.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("./link.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=a.default.forwardRef(({asChild:e=!1,label:a,size:c=`md`,priority:l=`primary`,iconName:u,iconPosition:d=`left`,external:f=!1,styles:p,className:m,children:h,target:g,..._},v)=>{let y=e?t.Root:`a`,b=f?`_blank`:g;return(0,s.jsx)(y,{ref:v,className:(0,o.default)(`wim-link`,i.default.root,i.default[c],i.default[l],f&&i.default.external,m,p?.root),target:b,..._,children:(0,s.jsxs)(`span`,{className:(0,o.default)(i.default.inner,p?.inner),children:[u&&d===`left`&&(0,s.jsx)(r.Icon,{name:u,size:c}),(0,s.jsx)(`span`,{className:(0,o.default)(i.default.label,p?.label),children:(0,s.jsx)(t.Slottable,{children:a??h})}),u&&d===`right`&&(0,s.jsx)(r.Icon,{name:u,size:c}),f&&(0,s.jsx)(r.Icon,{component:n.default,size:c,className:(0,o.default)(i.default.externalIcon,p?.externalIcon)})]})})});c.displayName=`Link`,exports.Link=c;

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

@@ -0,0 +1,87 @@
+import { default as React } from 'react';
+import { Icon } from '../../media/Icon/Icon';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export type LinkProps = React.ComponentPropsWithoutRef<"a"> & {
+    /**
+     * If true, the link will be rendered as its child, merging its props onto that child.
+     * Useful for using the link styles with Link components from React Router or Next.js.
+     */
+    asChild?: boolean;
+    /**
+     * Link text or element. Alternative to children.
+     */
+    label?: React.ReactNode;
+    /**
+     * Font size of the link.
+     * @default "md"
+     */
+    size?: ComponentSizeBasic;
+    /**
+     * Visual emphasis of the link.
+     * @default "primary"
+     */
+    priority?: "primary" | "secondary" | "tertiary";
+    /**
+     * Name of the icon displayed alongside the label.
+     */
+    iconName?: React.ComponentProps<typeof Icon>["name"];
+    /**
+     * Position of the icon relative to the label.
+     * @default "left"
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * If true, opens the link in a new tab and shows an external-link icon.
+     * @default false
+     */
+    external?: boolean;
+    /** Custom styles for internal parts */
+    styles?: {
+        root?: string;
+        label?: string;
+        inner?: string;
+        externalIcon?: string;
+    };
+};
+export declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    /**
+     * If true, the link will be rendered as its child, merging its props onto that child.
+     * Useful for using the link styles with Link components from React Router or Next.js.
+     */
+    asChild?: boolean;
+    /**
+     * Link text or element. Alternative to children.
+     */
+    label?: React.ReactNode;
+    /**
+     * Font size of the link.
+     * @default "md"
+     */
+    size?: ComponentSizeBasic;
+    /**
+     * Visual emphasis of the link.
+     * @default "primary"
+     */
+    priority?: "primary" | "secondary" | "tertiary";
+    /**
+     * Name of the icon displayed alongside the label.
+     */
+    iconName?: React.ComponentProps<typeof Icon>["name"];
+    /**
+     * Position of the icon relative to the label.
+     * @default "left"
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * If true, opens the link in a new tab and shows an external-link icon.
+     * @default false
+     */
+    external?: boolean;
+    /** Custom styles for internal parts */
+    styles?: {
+        root?: string;
+        label?: string;
+        inner?: string;
+        externalIcon?: string;
+    };
+} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/navigation/Link/Link.js

@@ -0,0 +1,43 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import n from "../../../icon/external-link.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
+import i from "./link.module.js";
+import a from "react";
+import o from "classnames";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/navigation/Link/Link.tsx
+var l = a.forwardRef(({ asChild: a = !1, label: l, size: u = "md", priority: d = "primary", iconName: f, iconPosition: p = "left", external: m = !1, styles: h, className: g, children: _, target: v, ...y }, b) => {
+	let x = a ? e : "a", S = m ? "_blank" : v;
+	return /* @__PURE__ */ s(x, {
+		ref: b,
+		className: o("wim-link", i.root, i[u], i[d], m && i.external, g, h?.root),
+		target: S,
+		...y,
+		children: /* @__PURE__ */ c("span", {
+			className: o(i.inner, h?.inner),
+			children: [
+				f && p === "left" && /* @__PURE__ */ s(r, {
+					name: f,
+					size: u
+				}),
+				/* @__PURE__ */ s("span", {
+					className: o(i.label, h?.label),
+					children: /* @__PURE__ */ s(t, { children: l ?? _ })
+				}),
+				f && p === "right" && /* @__PURE__ */ s(r, {
+					name: f,
+					size: u
+				}),
+				m && /* @__PURE__ */ s(r, {
+					component: n,
+					size: u,
+					className: o(i.externalIcon, h?.externalIcon)
+				})
+			]
+		})
+	});
+});
+l.displayName = "Link";
+//#endregion
+export { l as Link };

package/dist/components/navigation/Link/link.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_mi1i6_3`,t=`_inner_mi1i6_33`,n=`_label_mi1i6_38`,r=`_lg_mi1i6_41`,i=`_md_mi1i6_44`,a=`_sm_mi1i6_47`,o=`_primary_mi1i6_50`,s=`_secondary_mi1i6_57`,c=`_tertiary_mi1i6_63`,l=`_externalIcon_mi1i6_69`,u={root:e,inner:t,label:n,lg:r,md:i,sm:a,primary:o,secondary:s,tertiary:c,externalIcon:l};exports.default=u,exports.externalIcon=l,exports.inner=t,exports.label=n,exports.lg=r,exports.md=i,exports.primary=o,exports.root=e,exports.secondary=s,exports.sm=a,exports.tertiary=c;

package/dist/components/navigation/Link/link.module.js

@@ -0,0 +1,16 @@
+"use client";
+//#region src/components/navigation/Link/link.module.scss
+var e = "_root_mi1i6_3", t = "_inner_mi1i6_33", n = "_label_mi1i6_38", r = "_lg_mi1i6_41", i = "_md_mi1i6_44", a = "_sm_mi1i6_47", o = "_primary_mi1i6_50", s = "_secondary_mi1i6_57", c = "_tertiary_mi1i6_63", l = "_externalIcon_mi1i6_69", u = {
+	root: e,
+	inner: t,
+	label: n,
+	lg: r,
+	md: i,
+	sm: a,
+	primary: o,
+	secondary: s,
+	tertiary: c,
+	externalIcon: l
+};
+//#endregion
+export { u as default, l as externalIcon, t as inner, n as label, r as lg, i as md, o as primary, e as root, s as secondary, a as sm, c as tertiary };

package/dist/components/navigation/Menubar/Menubar.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("../../layout/Transition/Transition.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("./menubar.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,a.createContext)(null),l=(0,a.createContext)(null),u=()=>{let e=(0,a.useContext)(c);if(!e)throw Error(`Menubar compound parts must be used within <Menubar>`);return e},d=()=>{let e=(0,a.useContext)(l);if(!e)throw Error(`Menubar.Trigger/Content/Item must be used within <Menubar.Menu>`);return e},f=a.default.forwardRef(({asChild:e=!1,className:n,children:r,onKeyDown:l,...u},d)=>{let[f,p]=(0,a.useState)(null),m=(0,a.useRef)(new Map),h=(0,a.useRef)(null),g=(0,a.useCallback)(e=>{h.current=e,typeof d==`function`?d(e):d&&(d.current=e)},[d]),_=(0,a.useCallback)((e,t)=>{t?m.current.set(e,t):m.current.delete(e)},[]),v=(0,a.useCallback)(()=>Array.from(m.current.keys()),[]),y=(0,a.useCallback)(e=>{m.current.get(e)?.focus()},[]);(0,a.useEffect)(()=>{if(!f)return;let e=e=>{h.current&&!h.current.contains(e.target)&&p(null)},t=e=>{e.key===`Escape`&&(p(null),f&&y(f))};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[f,y]);let b=e=>{if(l?.(e),e.defaultPrevented)return;let t=v();if(t.length===0)return;let n=f??t.find(e=>m.current.get(e)===document.activeElement)??null;if(!n)return;let r=t.indexOf(n);if(!(r<0)){if(e.key===`ArrowRight`){e.preventDefault();let n=t[(r+1)%t.length];f&&p(n),y(n)}else if(e.key===`ArrowLeft`){e.preventDefault();let n=t[(r-1+t.length)%t.length];f&&p(n),y(n)}else if(e.key===`Home`){e.preventDefault();let n=t[0];f&&p(n),y(n)}else if(e.key===`End`){e.preventDefault();let n=t[t.length-1];f&&p(n),y(n)}}},x=(0,a.useMemo)(()=>({openMenuId:f,setOpenMenuId:p,registerTrigger:_,getTriggerIds:v,focusTrigger:y}),[f,_,v,y]),S=e?t.Root:`div`;return(0,s.jsx)(c.Provider,{value:x,children:(0,s.jsx)(S,{ref:g,role:`menubar`,className:(0,o.default)(`wim-menubar`,i.default.root,n),onKeyDown:b,...u,children:(0,s.jsx)(t.Slottable,{children:r})})})});f.displayName=`Menubar`;var p=a.default.forwardRef(({value:e,disabled:t=!1,className:n,children:r,...c},d)=>{let{openMenuId:f,setOpenMenuId:p}=u(),m=(0,a.useId)(),h=`wim-menubar-trigger-${e}-${m}`,g=`wim-menubar-content-${e}-${m}`,_=f===e,v=()=>{t||p(e)},y=()=>p(null),b=()=>{t||p(_?null:e)},x=(0,a.useMemo)(()=>({menuId:e,triggerId:h,contentId:g,isOpen:_,open:v,close:y,toggle:b}),[e,h,g,_,t]);return(0,s.jsx)(l.Provider,{value:x,children:(0,s.jsx)(`div`,{ref:d,role:`none`,"data-disabled":t||void 0,className:(0,o.default)(i.default.menu,n),...c,children:r})})});p.displayName=`Menubar.Menu`;var m=a.default.forwardRef(({asChild:e=!1,className:n,children:r,onKeyDown:c,onMouseEnter:l,...f},p)=>{let{openMenuId:m,registerTrigger:h}=u(),{triggerId:g,contentId:_,isOpen:v,open:y,toggle:b,menuId:x}=d(),S=!!f.disabled,C=(0,a.useCallback)(e=>{h(x,e),typeof p==`function`?p(e):p&&(p.current=e)},[h,x,p]),w=e=>{c?.(e),!(e.defaultPrevented||S)&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),y())},T=e=>{l?.(e),m&&!S&&y()};return(0,s.jsx)(e?t.Root:`button`,{...f,ref:C,type:e?void 0:`button`,id:g,role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":v,"aria-controls":v?_:void 0,disabled:S,className:(0,o.default)(i.default.trigger,v&&i.default.triggerOpen,n),onClick:b,onKeyDown:w,onMouseEnter:T,children:(0,s.jsx)(t.Slottable,{children:r})})});m.displayName=`Menubar.Trigger`;var h=a.default.forwardRef(({align:e=`start`,className:t,children:r,...c},l)=>{let{contentId:u,triggerId:f,isOpen:p}=d(),[m,h]=(0,a.useState)(-1),[g,_]=(0,a.useState)(p),v=(0,a.useRef)(null);p!==g&&(_(p),h(p?0:-1));let y=(0,a.useCallback)(e=>{v.current=e,typeof l==`function`?l(e):l&&(l.current=e)},[l]);(0,a.useEffect)(()=>{!p||m<0||Array.from(v.current?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)??[])[m]?.focus()},[m,p]);let b=e=>{let t=Array.from(v.current?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)??[]);if(t.length!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),h(e=>e<t.length-1?e+1:0);break;case`ArrowUp`:e.preventDefault(),h(e=>e>0?e-1:t.length-1);break;case`Home`:e.preventDefault(),h(0);break;case`End`:e.preventDefault(),h(t.length-1);break;default:break}};return(0,s.jsx)(n.Transition,{...c,ref:y,show:p,preset:`fade`,id:u,role:`menu`,"aria-labelledby":f,className:(0,o.default)(i.default.content,e===`end`?i.default.alignEnd:i.default.alignStart,t),onKeyDown:b,children:r})});h.displayName=`Menubar.Content`;var g=a.default.forwardRef(({children:e,onSelect:t,onClick:n,disabled:a=!1,className:c,...l},u)=>{let{close:f}=d(),p=e=>{a||(e.stopPropagation(),t?.(),n?.(e),f())};return(0,s.jsx)(r.BaseListItem,{...l,ref:u,className:(0,o.default)(i.default.item,c),disabled:a,role:`menuitem`,tabIndex:-1,onClick:p,onKeyDown:e=>{!a&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p(e))},children:e})});g.displayName=`Menubar.Item`;var _=a.default.forwardRef(({className:e,...t},n)=>(0,s.jsx)(`div`,{ref:n,role:`separator`,className:(0,o.default)(i.default.separator,e),...t}));_.displayName=`Menubar.Separator`;var v=f;v.Menu=p,v.Trigger=m,v.Content=h,v.Item=g,v.Separator=_,exports.Menubar=v,exports.default=v;

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

@@ -0,0 +1,75 @@
+import { default as React, ReactNode } from 'react';
+import { BaseListItemProps } from '../../_internal/BaseListItem';
+export type MenubarProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * If true, the component will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+};
+export type MenubarMenuProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Stable id for this top-level menu. Used for open-state coordination.
+     */
+    value: string;
+    /**
+     * Disables the top-level trigger and prevents opening.
+     */
+    disabled?: boolean;
+};
+declare const MenubarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Stable id for this top-level menu. Used for open-state coordination.
+     */
+    value: string;
+    /**
+     * Disables the top-level trigger and prevents opening.
+     */
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export type MenubarTriggerProps = React.ComponentPropsWithoutRef<"button"> & {
+    asChild?: boolean;
+};
+declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type MenubarContentProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Horizontal alignment of the floating panel relative to the trigger.
+     * @default "start"
+     */
+    align?: "start" | "end";
+};
+declare const MenubarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Horizontal alignment of the floating panel relative to the trigger.
+     * @default "start"
+     */
+    align?: "start" | "end";
+} & React.RefAttributes<HTMLDivElement>>;
+export type MenubarItemProps = BaseListItemProps & {
+    children: ReactNode;
+    onSelect?: () => void;
+};
+declare const MenubarItem: React.ForwardRefExoticComponent<{
+    asChild?: boolean;
+    icon?: React.ReactNode;
+    rightSection?: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+    className?: string;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children: ReactNode;
+    onSelect?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
+export type MenubarSeparatorProps = React.ComponentPropsWithoutRef<"div">;
+declare const MenubarSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface MenubarComponent extends React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>> {
+    Menu: typeof MenubarMenu;
+    Trigger: typeof MenubarTrigger;
+    Content: typeof MenubarContent;
+    Item: typeof MenubarItem;
+    Separator: typeof MenubarSeparator;
+}
+export declare const Menubar: MenubarComponent;
+export default Menubar;