@neut/ui 0.0.15 → 0.0.17

package/dist/components/combobox/ComboboxList/ComboboxList.js

@@ -1,22 +1,23 @@
 import { clsx as e } from "../../../utils/clsx.js";
-import { useComboboxContext as t } from "../Combobox/Combobox.context.js";
-import { className as n, createComponent as r, effect as i, insert as a, template as o } from "solid-js/web";
-import { For as s } from "solid-js";
+import { ScrollArrows as t } from "../../scroll-arrows/ScrollArrows.js";
+import { useComboboxContext as n } from "../Combobox/Combobox.context.js";
+import { className as r, createComponent as i, effect as a, insert as o, template as s, use as c } from "solid-js/web";
+import { For as l, createSignal as u } from "solid-js";
 //#region src/components/combobox/ComboboxList/ComboboxList.tsx
-var c = /*#__PURE__*/ o("<div data-slot=combobox-list role=listbox>");
-function l(o) {
-	let l = t("ComboboxList"), u = () => l.isGrouped() ? l.items() : l.filteredItems();
+var d = /*#__PURE__*/ s("<div class=relative><div data-slot=combobox-list role=listbox>");
+function f(s) {
+	let f = n("ComboboxList"), [p, m] = u(), h = () => f.isGrouped() ? f.items() : f.filteredItems();
 	return (() => {
-		var t = c();
-		return a(t, r(s, {
+		var n = d(), u = n.firstChild;
+		return c(m, u), o(u, i(l, {
 			get each() {
-				return u();
+				return h();
 			},
-			children: (e, t) => typeof o.children == "function" ? o.children(e, t()) : o.children
-		})), i(() => n(t, e("max-h-72 overflow-y-auto overscroll-contain p-1", o.class))), t;
+			children: (e, t) => typeof s.children == "function" ? s.children(e, t()) : s.children
+		})), o(n, i(t, { target: p }), null), a(() => r(u, e("max-h-72 overflow-y-auto overscroll-contain p-1", "no-scrollbar [&::-webkit-scrollbar]:hidden", s.class))), n;
 	})();
 }
 //#endregion
-export { l as ComboboxList };
+export { f as ComboboxList };
 
 //# sourceMappingURL=ComboboxList.js.map

package/dist/components/combobox/ComboboxList/ComboboxList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxList.js","names":["For","JSX","clsx","useComboboxContext","ComboboxList","props","children","Element","item","index","class","ctx","listItems","isGrouped","items","filteredItems","_el$","_tmpl$","_$insert","_$createComponent","each","_$effect","_$className"],"sources":["../../../../src/components/combobox/ComboboxList/ComboboxList.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useComboboxContext } from \"../Combobox/Combobox.context\";\n\nexport function ComboboxList(props: {\n  children?: JSX.Element | ((item: any, index: number) => JSX.Element);\n  class?: string;\n}) {\n  const ctx = useComboboxContext(\"ComboboxList\");\n  const listItems = () => (ctx.isGrouped() ? ctx.items() : ctx.filteredItems());\n\n  return (\n    <div\n      data-slot=\"combobox-list\"\n      class={clsx(\n        \"max-h-72 overflow-y-auto overscroll-contain p-1\",\n        props.class,\n      )}\n      role=\"listbox\"\n    >\n      <For each={listItems()}>\n        {(item, index) =>\n          typeof props.children === \"function\"\n            ? props.children(item, index())\n            : props.children\n        }\n      </For>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAIA,SAAgBI,EAAaC,GAG1B;CACD,IAAMM,IAAMR,EAAmB,cAAc,GACvCS,UAAmBD,EAAIE,UAAU,IAAIF,EAAIG,MAAM,IAAIH,EAAII,cAAc;CAE3E,cAAA;EAAA,IAAAC,IAAAC,EAAA;EAMK,OANLC,EAAAF,GAAAG,EASKnB,GAAG;GAAA,IAACoB,OAAI;IAAA,OAAER,EAAU;GAAC;GAAAN,WAClBE,GAAMC,MACN,OAAOJ,EAAMC,YAAa,aACtBD,EAAMC,SAASE,GAAMC,EAAM,CAAC,IAC5BJ,EAAMC;EAAQ,CAAA,CAAA,GAAAe,QAAAC,EAAAN,GAVfd,EACL,mDACAG,EAAMK,KACR,CAAC,CAAA,GAAAM;CAAA,EAAA,CAAA;AAYP"}
+{"version":3,"file":"ComboboxList.js","names":["For","createSignal","JSX","clsx","ScrollArrows","useComboboxContext","ComboboxList","props","children","Element","item","index","class","ctx","listElement","setListElement","HTMLElement","listItems","isGrouped","items","filteredItems","_el$","_tmpl$","_el$2","firstChild","_$use","_$insert","_$createComponent","each","target","_$effect","_$className","_$createComponent","_$className","_tmpl$","ComboboxList","ctx","useComboboxContext","listElement","setListElement","createSignal","listItems","_el$","_el$2","use","insert","createComponent","For","props","item","index","ScrollArrows","effect","className","clsx"],"sources":["../../../../src/components/combobox/ComboboxList/ComboboxList.tsx"],"sourcesContent":["import { For, createSignal, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { ScrollArrows } from \"~/components/scroll-arrows\";\nimport { useComboboxContext } from \"../Combobox/Combobox.context\";\n\nexport function ComboboxList(props: {\n  children?: JSX.Element | ((item: any, index: number) => JSX.Element);\n  class?: string;\n}) {\n  const ctx = useComboboxContext(\"ComboboxList\");\n  const [listElement, setListElement] = createSignal<HTMLElement>();\n  const listItems = () => (ctx.isGrouped() ? ctx.items() : ctx.filteredItems());\n\n  return (\n    // 外层只做相对定位，供滚动箭头贴住列表上下沿；自身不滚动\n    <div class=\"relative\">\n      <div\n        ref={setListElement}\n        data-slot=\"combobox-list\"\n        class={clsx(\n          \"max-h-72 overflow-y-auto overscroll-contain p-1\",\n          \"no-scrollbar [&::-webkit-scrollbar]:hidden\",\n          props.class,\n        )}\n        role=\"listbox\"\n      >\n        <For each={listItems()}>\n          {(item, index) =>\n            typeof props.children === \"function\"\n              ? props.children(item, index())\n              : props.children\n          }\n        </For>\n      </div>\n      <ScrollArrows target={listElement} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAKA,SAAgBM,EAAaC,GAG1B;CACD,IAAMM,IAAMR,EAAmB,cAAc,GACvC,CAACS,GAAaC,KAAkBd,EAA0B,GAC1DgB,UAAmBJ,EAAIK,UAAU,IAAIL,EAAIM,MAAM,IAAIN,EAAIO,cAAc;CAE3E,cACE;EAAA,IAAAC,IAAAC,EAAA,GAAAC,IAAAF,EAAAG;EASK,OATLC,EAGSV,GAAcQ,CAAA,GAAAG,EAAAH,GAAAI,EASlB3B,GAAG;GAAA,IAAC4B,OAAI;IAAA,OAAEX,EAAU;GAAC;GAAAT,WAClBE,GAAMC,MACN,OAAOJ,EAAMC,YAAa,aACtBD,EAAMC,SAASE,GAAMC,EAAM,CAAC,IAC5BJ,EAAMC;EAAQ,CAAA,CAAA,GAAAkB,EAAAL,GAAAM,EAIvBvB,GAAY,EAACyB,QAAQf,EAAW,CAAA,GAAA,IAAA,GAAAgB,QAAAC,EAAAR,GAfxBpB,EACL,mDACA,8CACAI,EAAMK,KACR,CAAC,CAAA,GAAAS;CAAA,EAAA,CAAA;AAcT"}

package/dist/components/combobox/ComboboxSeparator/ComboboxSeparator.d.ts

@@ -1,3 +1,3 @@
 export declare function ComboboxSeparator(props: {
     class?: string;
-}): import("solid-js").JSX.Element;
+}): import('solid-js').JSX.Element;

package/dist/components/combobox/ComboboxSeparator/ComboboxSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxSeparator.js","names":["clsx","ComboboxSeparator","props","class","_el$","_tmpl$","_$effect","_$className"],"sources":["../../../../src/components/combobox/ComboboxSeparator/ComboboxSeparator.tsx"],"sourcesContent":["import { clsx } from \"~/utils\";\n\nexport function ComboboxSeparator(props: { class?: string }) {\n  return (\n    <div\n      data-slot=\"combobox-separator\"\n      class={clsx(\"-mx-1 my-1 h-px bg-border\", props.class)}\n    />\n  );\n}\n"],"mappings":";;;;AAEA,SAAgBC,EAAkBC,GAA2B;CAC3D,cAAA;EAAA,IAAAE,IAAAC,EAAA;EAGyD,OAHzDC,QAAAC,EAAAH,GAGWJ,EAAK,6BAA6BE,EAAMC,KAAK,CAAC,CAAA,GAAAC;CAAA,EAAA,CAAA;AAG3D"}
+{"version":3,"file":"ComboboxSeparator.js","names":["clsx","ComboboxSeparator","props","class","_el$","_tmpl$","_$effect","_$className","_$className","_tmpl$","ComboboxSeparator","_el$","effect","className","clsx","props"],"sources":["../../../../src/components/combobox/ComboboxSeparator/ComboboxSeparator.tsx"],"sourcesContent":["import { clsx } from \"~/utils\";\n\nexport function ComboboxSeparator(props: { class?: string }) {\n  return (\n    <div\n      data-slot=\"combobox-separator\"\n      class={clsx(\"-mx-1 my-1 h-px bg-border\", props.class)}\n    />\n  );\n}\n"],"mappings":";;;;AAEA,SAAgBC,EAAkBC,GAA2B;CAC3D,cAAA;EAAA,IAAAE,IAAAC,EAAA;EAGyD,OAHzDC,QAAAC,EAAAH,GAGWJ,EAAK,6BAA6BE,EAAMC,KAAK,CAAC,CAAA,GAAAC;CAAA,EAAA,CAAA;AAG3D"}

package/dist/components/combobox/ComboboxTrigger/ComboboxTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxTrigger.js","names":["JSX","ChevronDown","clsx","useComboboxContext","InputGroupButton","ComboboxTrigger","props","children","Element","class","disabled","ctx","_$createComponent","ref","r$","_ref$","setReference","variant","onClick","setOpen","open","_$memo"],"sources":["../../../../src/components/combobox/ComboboxTrigger/ComboboxTrigger.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { ChevronDown } from \"lucide-solid\";\nimport { clsx } from \"~/utils\";\nimport { useComboboxContext } from \"../Combobox/Combobox.context\";\nimport { InputGroupButton } from \"~/components/input-group\";\n\nexport function ComboboxTrigger(props: {\n  children?: JSX.Element;\n  class?: string;\n  disabled?: boolean;\n}) {\n  const ctx = useComboboxContext(\"ComboboxTrigger\");\n  return (\n    <InputGroupButton\n      ref={ctx.setReference}\n      variant=\"outline\"\n      data-slot=\"combobox-trigger\"\n      class={clsx(\n        \"h-8 [&_svg:not([class*='size-'])]:size-4 active:not-aria-[haspopup]:translate-y-0\",\n        props.class,\n      )}\n      disabled={ctx.disabled() || props.disabled}\n      onClick={() => ctx.setOpen(!ctx.open())}\n    >\n      {props.children}\n      <ChevronDown\n        data-slot=\"combobox-trigger-icon\"\n        class=\"pointer-events-none size-4 text-muted-foreground\"\n      />\n    </InputGroupButton>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgBK,EAAgBC,GAI7B;CACD,IAAMK,IAAMR,EAAmB,iBAAiB;CAChD,OAAAS,EACGR,GAAgB;EAAAS,IAAAC,GAAA;GAAA,IAAAC,IACVJ,EAAIK;GAAY,OAAAD,KAAA,aAAAA,EAAAD,CAAA,IAAhBH,EAAIK,eAAYF;EAAA;EACrBG,SAAO;EAAA,aAAA;EAAA,IAAA,QAAA;GAAA,OAEAf,EACL,qFACAI,EAAMG,KACR;EAAC;EAAA,IACDC,WAAQ;GAAA,OAAEC,EAAID,SAAS,KAAKJ,EAAMI;EAAQ;EAC1CQ,eAAeP,EAAIQ,QAAQ,CAACR,EAAIS,KAAK,CAAC;EAAC,IAAAb,WAAA;GAAA,OAAA,CAAAc,QAEtCf,EAAMC,QAAQ,GAAAK,EACdX,GAAW;IAAA,aAAA;IAAA,OAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAMlB"}
+{"version":3,"file":"ComboboxTrigger.js","names":["JSX","ChevronDown","clsx","useComboboxContext","InputGroupButton","ComboboxTrigger","props","children","Element","class","disabled","ctx","_$createComponent","ref","r$","_ref$","setReference","variant","onClick","setOpen","open","_$memo","_$createComponent","_$memo","ComboboxTrigger","ctx","useComboboxContext","createComponent","InputGroupButton","_ref$","r$","\"class\"","clsx","props","memo","ChevronDown"],"sources":["../../../../src/components/combobox/ComboboxTrigger/ComboboxTrigger.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { ChevronDown } from \"lucide-solid\";\nimport { clsx } from \"~/utils\";\nimport { useComboboxContext } from \"../Combobox/Combobox.context\";\nimport { InputGroupButton } from \"~/components/input-group\";\n\nexport function ComboboxTrigger(props: {\n  children?: JSX.Element;\n  class?: string;\n  disabled?: boolean;\n}) {\n  const ctx = useComboboxContext(\"ComboboxTrigger\");\n  return (\n    <InputGroupButton\n      ref={ctx.setReference}\n      variant=\"outline\"\n      data-slot=\"combobox-trigger\"\n      class={clsx(\n        \"h-8 [&_svg:not([class*='size-'])]:size-4 active:not-aria-[haspopup]:translate-y-0\",\n        props.class,\n      )}\n      disabled={ctx.disabled() || props.disabled}\n      onClick={() => ctx.setOpen(!ctx.open())}\n    >\n      {props.children}\n      <ChevronDown\n        data-slot=\"combobox-trigger-icon\"\n        class=\"pointer-events-none size-4 text-muted-foreground\"\n      />\n    </InputGroupButton>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgBK,EAAgBC,GAI7B;CACD,IAAMK,IAAMR,EAAmB,iBAAiB;CAChD,OAAAS,EACGR,GAAgB;EAAAS,IAAAC,GAAA;GAAA,IAAAC,IACVJ,EAAIK;GAAY,OAAAD,KAAA,aAAAA,EAAAD,CAAA,IAAhBH,EAAIK,eAAYF;EAAA;EACrBG,SAAO;EAAA,aAAA;EAAA,IAAAc,QAAA;GAAA,OAEA7B,EACL,qFACAI,EAAMG,KACR;EAAC;EAAA,IACDC,WAAQ;GAAA,OAAEC,EAAID,SAAS,KAAKJ,EAAMI;EAAQ;EAC1CQ,eAAeP,EAAIQ,QAAQ,CAACR,EAAIS,KAAK,CAAC;EAAC,IAAAb,WAAA;GAAA,OAAA,CAAAc,QAEtCf,EAAMC,QAAQ,GAAAK,EACdX,GAAW;IAAA,aAAA;IAAA8B,OAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAMlB"}

package/dist/components/combobox/ComboboxValue/ComboboxValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxValue.js","names":["children","createMemo","JSX","useComboboxContext","ComboboxValue","props","placeholder","Element","values","ctx","selected","current","value","Array","isArray","render","length","map","item","itemToStringValue","join","_$memo"],"sources":["../../../../src/components/combobox/ComboboxValue/ComboboxValue.tsx"],"sourcesContent":["import { children, createMemo, type JSX } from \"solid-js\";\nimport { useComboboxContext } from \"../Combobox/Combobox.context\";\n\nexport function ComboboxValue(props: {\n  placeholder?: string;\n  children?: JSX.Element | ((values: any[]) => JSX.Element);\n}): JSX.Element {\n  const ctx = useComboboxContext(\"ComboboxValue\");\n  const selected = createMemo(() => {\n    const current = ctx.value();\n    if (current == null) return [] as any[];\n    return Array.isArray(current) ? current : [current];\n  });\n\n  const render = children(() => {\n    if (typeof props.children === \"function\") return props.children(selected());\n    if (selected().length > 0) {\n      return selected()\n        .map((item) => ctx.itemToStringValue(item))\n        .join(\", \") as unknown as JSX.Element;\n    }\n    return (props.placeholder ?? \"\") as unknown as JSX.Element;\n  });\n\n  return <>{render()}</>;\n}\n"],"mappings":";;;;AAGA,SAAgBI,EAAcC,GAGd;CACd,IAAMI,IAAMN,EAAmB,eAAe,GACxCO,IAAWT,QAAiB;EAChC,IAAMU,IAAUF,EAAIG,MAAM;EAE1B,OADID,KAAW,OAAa,CAAA,IACrBE,MAAMC,QAAQH,CAAO,IAAIA,IAAU,CAACA,CAAO;CACpD,CAAC,GAEKI,IAASf,QACT,OAAOK,EAAML,YAAa,aAAmBK,EAAML,SAASU,EAAS,CAAC,IACtEA,EAAS,CAAC,CAACM,SAAS,IACfN,EAAS,CAAC,CACdO,KAAKC,MAAST,EAAIU,kBAAkBD,CAAI,CAAC,CAAC,CAC1CE,KAAK,IAAI,IAENf,EAAMC,eAAe,EAC9B;CAED,OAAAe,EAAUN,CAAM;AAClB"}
+{"version":3,"file":"ComboboxValue.js","names":["children","createMemo","JSX","useComboboxContext","ComboboxValue","props","placeholder","Element","values","ctx","selected","current","value","Array","isArray","render","length","map","item","itemToStringValue","join","_$memo","_$memo","ComboboxValue","ctx","useComboboxContext","selected","createMemo","current","render","children","props","item","memo"],"sources":["../../../../src/components/combobox/ComboboxValue/ComboboxValue.tsx"],"sourcesContent":["import { children, createMemo, type JSX } from \"solid-js\";\nimport { useComboboxContext } from \"../Combobox/Combobox.context\";\n\nexport function ComboboxValue(props: {\n  placeholder?: string;\n  children?: JSX.Element | ((values: any[]) => JSX.Element);\n}): JSX.Element {\n  const ctx = useComboboxContext(\"ComboboxValue\");\n  const selected = createMemo(() => {\n    const current = ctx.value();\n    if (current == null) return [] as any[];\n    return Array.isArray(current) ? current : [current];\n  });\n\n  const render = children(() => {\n    if (typeof props.children === \"function\") return props.children(selected());\n    if (selected().length > 0) {\n      return selected()\n        .map((item) => ctx.itemToStringValue(item))\n        .join(\", \") as unknown as JSX.Element;\n    }\n    return (props.placeholder ?? \"\") as unknown as JSX.Element;\n  });\n\n  return <>{render()}</>;\n}\n"],"mappings":";;;;AAGA,SAAgBI,EAAcC,GAGd;CACd,IAAMI,IAAMN,EAAmB,eAAe,GACxCO,IAAWT,QAAiB;EAChC,IAAMU,IAAUF,EAAIG,MAAM;EAE1B,OADID,KAAW,OAAa,CAAA,IACrBE,MAAMC,QAAQH,CAAO,IAAIA,IAAU,CAACA,CAAO;CACpD,CAAC,GAEKI,IAASf,QACT,OAAOK,EAAML,YAAa,aAAmBK,EAAML,SAASU,EAAS,CAAC,IACtEA,EAAS,CAAC,CAACM,SAAS,IACfN,EAAS,CAAC,CACdO,KAAKC,MAAST,EAAIU,kBAAkBD,CAAI,CAAC,CAAC,CAC1CE,KAAK,IAAI,IAENf,EAAMC,eAAe,EAC9B;CAED,OAAAe,EAAUN,CAAM;AAClB"}

package/dist/components/combobox/useComboboxAnchor/useComboboxAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComboboxAnchor.js","names":["createSignal","useComboboxAnchor","HTMLElement"],"sources":["../../../../src/components/combobox/useComboboxAnchor/useComboboxAnchor.tsx"],"sourcesContent":["import { createSignal } from \"solid-js\";\n\nexport function useComboboxAnchor() {\n  return createSignal<HTMLElement | undefined>();\n}\n"],"mappings":";;AAEA,SAAgBC,IAAoB;CAClC,OAAOD,EAAsC;AAC/C"}
+{"version":3,"file":"useComboboxAnchor.js","names":["createSignal","useComboboxAnchor","HTMLElement","useComboboxAnchor","createSignal"],"sources":["../../../../src/components/combobox/useComboboxAnchor/useComboboxAnchor.tsx"],"sourcesContent":["import { createSignal } from \"solid-js\";\n\nexport function useComboboxAnchor() {\n  return createSignal<HTMLElement | undefined>();\n}\n"],"mappings":";;AAEA,SAAgBC,IAAoB;CAClC,OAAOD,EAAsC;AAC/C"}

package/dist/components/context-menu/ContextMenu/ContextMenu.context.d.ts

@@ -0,0 +1,3 @@
+import { ContextMenuContextValue } from '../context-menu.types';
+export declare const ContextMenuContext: import('solid-js').Context<ContextMenuContextValue | undefined>;
+export declare function useContextMenuContext(component: string): ContextMenuContextValue;

package/dist/components/context-menu/ContextMenu/ContextMenu.context.js

@@ -0,0 +1,12 @@
+import { createContext as e, useContext as t } from "solid-js";
+//#region src/components/context-menu/ContextMenu/ContextMenu.context.ts
+var n = e();
+function r(e) {
+	let r = t(n);
+	if (!r) throw Error(`<${e}> 必须渲染在 <ContextMenu> 内部`);
+	return r;
+}
+//#endregion
+export { n as ContextMenuContext, r as useContextMenuContext };
+
+//# sourceMappingURL=ContextMenu.context.js.map

package/dist/components/context-menu/ContextMenu/ContextMenu.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.context.js","names":["ContextMenuContext","createContext","useContextMenuContext","ctx","useContext","component"],"sources":["../../../../src/components/context-menu/ContextMenu/ContextMenu.context.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\nimport type { ContextMenuContextValue } from \"../context-menu.types\";\n\nexport const ContextMenuContext = createContext<ContextMenuContextValue>();\n\nexport function useContextMenuContext(\n  component: string,\n): ContextMenuContextValue {\n  const ctx = useContext(ContextMenuContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <ContextMenu> 内部`);\n  }\n  return ctx;\n}\n"],"mappings":";;AAGA,IAAaA,IAAqBC,EAAuC;AAEzE,SAAgBC,EACd,GACyB;CACzB,IAAMC,IAAMC,EAAWJ,CAAkB;CACzC,IAAI,CAACG,GACH,MAAU,MAAM,IAAIE,EAAU,yBAAyB;CAEzD,OAAOF;AACT"}

package/dist/components/context-menu/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+import { ContextMenuProps } from './ContextMenu.types';
+/**
+ * ContextMenu 根组件:不渲染任何 DOM,只负责状态管理 + 提供 context。
+ *
+ * 这是 shadcn 基于 Base UI 的 ContextMenu 的 SolidJS 移植:Base UI 的 Root
+ * 同样不渲染自己的 HTML 元素,只作为状态容器。
+ *
+ * 与普通菜单不同的地方在于"锚点":右键菜单的定位参照是鼠标点击的像素坐标,
+ * 因此这里用 `createVirtualElement` 生成一个宽高为 0 的虚拟参照元素,
+ * 再交给内容层用 position:fixed 定位(细节见 ContextMenuContent)。
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenuTrigger>右键点击这里</ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem>个人资料</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ */
+export declare function ContextMenu(props: ContextMenuProps): JSX.Element;

package/dist/components/context-menu/ContextMenu/ContextMenu.js

@@ -0,0 +1,73 @@
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+import { createVirtualElement as t } from "../../../lib/positioner/virtual-element.js";
+import { ContextMenuContext as n } from "./ContextMenu.context.js";
+import { createChangeEventDetails as r } from "../context-menu.utils.js";
+import { createComponent as i } from "solid-js/web";
+import { createEffect as a, createMemo as o, createSignal as s, createUniqueId as c, onCleanup as l } from "solid-js";
+//#region src/components/context-menu/ContextMenu/ContextMenu.tsx
+var u = "[data-slot=\"context-menu-content\"],[data-slot=\"context-menu-sub-content\"]";
+function d(d) {
+	let [f, p] = s(d.defaultOpen ?? !1), m = o(() => d.open === void 0 ? f() : d.open), h = o(() => !!d.disabled), g = o(() => d.loopFocus ?? !0), _ = o(() => d.orientation ?? "vertical"), v = o(() => d.highlightItemOnHover ?? !0), y = o(() => d.modal ?? !0);
+	e(() => m() && y(), { allowedSelector: u });
+	let [b, x] = s(!0), [S, C] = s(), [w, T] = s(), E = `context-menu-content-${c()}`, D = /* @__PURE__ */ new Set(), O = () => {
+		let e = S();
+		e && typeof e.focus == "function" && e.focus({ preventScroll: !0 });
+	}, k = (e, t, n) => {
+		d.open === void 0 && p(e), d.onOpenChange?.(e, r(t, n, S()));
+	}, A = (e, n, r, i, a = "trigger-press") => {
+		h() || (T(t({
+			x: e,
+			y: n,
+			contextElement: r
+		})), m() || k(!0, a, i));
+	}, j = (e, t) => {
+		m() && (k(!1, e, t), e !== "outside-press" && b() && O());
+	}, M = (e) => {
+		if (!e || !(e instanceof Element)) return !1;
+		for (let t of D) if (t.contains(e)) return !0;
+		return !1;
+	}, N = (e) => !e || !(e instanceof Element) ? !1 : !!S()?.contains(e), P = (e) => (D.add(e), () => {
+		D.delete(e);
+	});
+	a(() => {
+		if (!m()) return;
+		let e = (e) => {
+			e.button !== 2 && (M(e.target) || j("outside-press", e));
+		}, t = (e) => {
+			let t = e.target;
+			!M(t) && !N(t) && j("outside-press", e);
+		}, n = (e) => {
+			e.defaultPrevented || e.key === "Escape" && j("escape-key", e);
+		};
+		document.addEventListener("pointerdown", e, !0), document.addEventListener("contextmenu", t, !0), document.addEventListener("keydown", n), l(() => {
+			document.removeEventListener("pointerdown", e, !0), document.removeEventListener("contextmenu", t, !0), document.removeEventListener("keydown", n);
+		});
+	});
+	let F = {
+		open: m,
+		disabled: h,
+		loopFocus: g,
+		orientation: _,
+		highlightItemOnHover: v,
+		trigger: S,
+		setTrigger: C,
+		anchor: w,
+		contentId: E,
+		finalFocus: b,
+		setFinalFocus: x,
+		openAt: A,
+		closeAll: j,
+		registerMenuElement: P,
+		isInsideMenu: M
+	};
+	return i(n.Provider, {
+		value: F,
+		get children() {
+			return d.children;
+		}
+	});
+}
+//#endregion
+export { d as ContextMenu };
+
+//# sourceMappingURL=ContextMenu.js.map

package/dist/components/context-menu/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":["createEffect","createMemo","createSignal","createUniqueId","onCleanup","JSX","createVirtualElement","VirtualElement","useScrollLock","ContextMenuContext","ContextMenuProps","ContextMenuChangeEventReason","ContextMenuContextValue","createChangeEventDetails","MENU_POPUP_SELECTOR","ContextMenu","props","Element","internalOpen","setInternalOpen","defaultOpen","open","undefined","disabled","loopFocus","orientation","highlightItemOnHover","modal","allowedSelector","finalFocus","setFinalFocus","trigger","setTrigger","HTMLElement","anchor","setAnchor","contentId","menuElements","Set","restoreFocus","el","focus","preventScroll","commit","next","reason","event","Event","onOpenChange","openAt","x","y","contextElement","closeAll","isInsideMenu","node","Node","contains","isInsideTrigger","registerMenuElement","add","delete","onPointerDown","e","PointerEvent","button","target","onContextMenu","MouseEvent","onKeyDown","KeyboardEvent","defaultPrevented","key","document","addEventListener","removeEventListener","ctx","_$createComponent","Provider","value","children","_$createComponent","MENU_POPUP_SELECTOR","ContextMenu","internalOpen","setInternalOpen","createSignal","props","open","createMemo","disabled","loopFocus","orientation","highlightItemOnHover","modal","finalFocus","setFinalFocus","trigger","setTrigger","anchor","setAnchor","contentId","createUniqueId","menuElements","restoreFocus","el","commit","next","createChangeEventDetails","reason","event","openAt","createVirtualElement","closeAll","isInsideMenu","node","isInsideTrigger","registerMenuElement","onPointerDown","onContextMenu","target","onKeyDown","onCleanup","ctx","createComponent","ContextMenuContext"],"sources":["../../../../src/components/context-menu/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  type JSX,\n} from \"solid-js\";\nimport { createVirtualElement, type VirtualElement } from \"~/lib\";\nimport { useScrollLock } from \"~/hooks\";\nimport { ContextMenuContext } from \"./ContextMenu.context\";\nimport type { ContextMenuProps } from \"./ContextMenu.types\";\nimport type {\n  ContextMenuChangeEventReason,\n  ContextMenuContextValue,\n} from \"../context-menu.types\";\nimport { createChangeEventDetails } from \"../context-menu.utils\";\n\n/** 菜单自身(根菜单/子菜单)的 popup 容器,允许在锁滚动期间继续在菜单内部滚动 */\nconst MENU_POPUP_SELECTOR =\n  '[data-slot=\"context-menu-content\"],[data-slot=\"context-menu-sub-content\"]';\n\n/**\n * ContextMenu 根组件:不渲染任何 DOM,只负责状态管理 + 提供 context。\n *\n * 这是 shadcn 基于 Base UI 的 ContextMenu 的 SolidJS 移植:Base UI 的 Root\n * 同样不渲染自己的 HTML 元素,只作为状态容器。\n *\n * 与普通菜单不同的地方在于\"锚点\":右键菜单的定位参照是鼠标点击的像素坐标,\n * 因此这里用 `createVirtualElement` 生成一个宽高为 0 的虚拟参照元素,\n * 再交给内容层用 position:fixed 定位(细节见 ContextMenuContent)。\n *\n * @example\n * ```tsx\n * <ContextMenu>\n *   <ContextMenuTrigger>右键点击这里</ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem>个人资料</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n * ```\n */\nexport function ContextMenu(props: ContextMenuProps): JSX.Element {\n  const [internalOpen, setInternalOpen] = createSignal(\n    props.defaultOpen ?? false,\n  );\n  const open = createMemo(() =>\n    props.open !== undefined ? props.open : internalOpen(),\n  );\n  const disabled = createMemo(() => !!props.disabled);\n  const loopFocus = createMemo(() => props.loopFocus ?? true);\n  const orientation = createMemo(() => props.orientation ?? \"vertical\");\n  const highlightItemOnHover = createMemo(\n    () => props.highlightItemOnHover ?? true,\n  );\n  const modal = createMemo(() => props.modal ?? true);\n\n  // 打开期间锁定页面滚动(Base UI menu 的 modal 默认行为),关闭时恢复。\n  // 菜单自身(含子菜单)允许继续滚动。\n  useScrollLock(() => open() && modal(), {\n    allowedSelector: MENU_POPUP_SELECTOR,\n  });\n\n  const [finalFocus, setFinalFocus] = createSignal(true);\n  const [trigger, setTrigger] = createSignal<HTMLElement>();\n  const [anchor, setAnchor] = createSignal<VirtualElement>();\n  const contentId = `context-menu-content-${createUniqueId()}`;\n\n  // 已挂载的浮层容器(根菜单 + 各级子菜单),用于判断指针是否落在菜单内部。\n  // 这里刻意不用响应式结构:它只在事件回调里读取,变化本身不需要驱动渲染。\n  const menuElements = new Set<HTMLElement>();\n\n  const restoreFocus = () => {\n    const el = trigger();\n    if (el && typeof el.focus === \"function\") {\n      el.focus({ preventScroll: true });\n    }\n  };\n\n  const commit = (\n    next: boolean,\n    reason: ContextMenuChangeEventReason,\n    event?: Event,\n  ) => {\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(\n      next,\n      createChangeEventDetails(reason, event, trigger()),\n    );\n  };\n\n  const openAt = (\n    x: number,\n    y: number,\n    contextElement: Element | undefined,\n    event?: Event,\n    reason: ContextMenuChangeEventReason = \"trigger-press\",\n  ) => {\n    if (disabled()) return;\n    // 每次打开都换一个新的虚拟元素:即使菜单已经打开,右键到新位置也会\n    // 触发 positioner 重新计算(autoUpdate 之外的一条路径)。\n    setAnchor(createVirtualElement({ x, y, contextElement }));\n    if (!open()) commit(true, reason, event);\n  };\n\n  const closeAll = (reason: ContextMenuChangeEventReason, event?: Event) => {\n    if (!open()) return;\n    commit(false, reason, event);\n    // 点击菜单外部时焦点应该留在用户刚点的目标上,不能把焦点抢回触发器。\n    if (reason !== \"outside-press\" && finalFocus()) restoreFocus();\n  };\n\n  const isInsideMenu = (node: Node | null): boolean => {\n    if (!node || !(node instanceof Element)) return false;\n    for (const el of menuElements) {\n      if (el.contains(node)) return true;\n    }\n    return false;\n  };\n\n  const isInsideTrigger = (node: Node | null): boolean => {\n    if (!node || !(node instanceof Element)) return false;\n    return !!trigger()?.contains(node);\n  };\n\n  const registerMenuElement = (el: HTMLElement) => {\n    menuElements.add(el);\n    return () => {\n      menuElements.delete(el);\n    };\n  };\n\n  // 打开期间绑定 document 级监听:点击外部/再次右键外部关闭 + Escape 兜底关闭。\n  // 菜单内部的 Escape 会由浮层自己处理并 stopPropagation,不会走到这里。\n  createEffect(() => {\n    if (!open()) return;\n\n    const onPointerDown = (e: PointerEvent) => {\n      // 右键交给 contextmenu 处理:否则会先被这里关掉、又被触发器重新打开,\n      // 中间闪一帧。\n      if (e.button === 2) return;\n      // 注意这里不把触发器算作\"内部\":菜单打开时左键点触发器应当关闭菜单。\n      if (!isInsideMenu(e.target as Node | null)) {\n        closeAll(\"outside-press\", e);\n      }\n    };\n\n    const onContextMenu = (e: MouseEvent) => {\n      const target = e.target as Node | null;\n      // 在触发器上再次右键只更新锚点,由触发器自己的 contextmenu 处理。\n      if (!isInsideMenu(target) && !isInsideTrigger(target)) {\n        closeAll(\"outside-press\", e);\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      // 菜单浮层自己处理 Escape 时会 preventDefault + stopPropagation。\n      // 这里再检查一次 defaultPrevented:键盘事件在 Solid 里是委托到 document 的,\n      // 同元素上的其它监听器不会被 stopPropagation 拦下,靠这个标记避免重复关闭。\n      if (e.defaultPrevented) return;\n      if (e.key === \"Escape\") closeAll(\"escape-key\", e);\n    };\n\n    document.addEventListener(\"pointerdown\", onPointerDown, true);\n    document.addEventListener(\"contextmenu\", onContextMenu, true);\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => {\n      document.removeEventListener(\"pointerdown\", onPointerDown, true);\n      document.removeEventListener(\"contextmenu\", onContextMenu, true);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    });\n  });\n\n  const ctx: ContextMenuContextValue = {\n    open,\n    disabled,\n    loopFocus,\n    orientation,\n    highlightItemOnHover,\n    trigger,\n    setTrigger,\n    anchor,\n    contentId,\n    finalFocus,\n    setFinalFocus,\n    openAt,\n    closeAll,\n    registerMenuElement,\n    isInsideMenu,\n  };\n\n  return (\n    <ContextMenuContext.Provider value={ctx}>\n      {props.children}\n    </ContextMenuContext.Provider>\n  );\n}\n"],"mappings":"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"}

package/dist/components/context-menu/ContextMenu/ContextMenu.types.d.ts

@@ -0,0 +1,28 @@
+import { ParentProps } from 'solid-js';
+import { ContextMenuChangeEventDetails, ContextMenuOrientation } from '../context-menu.types';
+/**
+ * ContextMenu 根组件 props,对齐 Base UI `ContextMenu.Root`。
+ * 根组件不渲染任何 DOM,只负责状态与 context。
+ */
+export interface ContextMenuProps extends ParentProps {
+    /** 受控打开状态;不传则内部自管理 */
+    open?: boolean;
+    /** 非受控模式下的初始打开状态 */
+    defaultOpen?: boolean;
+    /** 打开状态变化回调,第二个参数对齐 Base UI 的 ChangeEventDetails */
+    onOpenChange?: (open: boolean, eventDetails: ContextMenuChangeEventDetails) => void;
+    /** 是否忽略用户交互 */
+    disabled?: boolean;
+    /** 方向键到达两端时是否回到另一端,默认 true */
+    loopFocus?: boolean;
+    /** 鼠标悬停是否高亮菜单项,默认 true */
+    highlightItemOnHover?: boolean;
+    /** 菜单排列方向,默认 'vertical' */
+    orientation?: ContextMenuOrientation;
+    /**
+     * 打开时是否进入模态状态,默认 true(对齐 Base UI):
+     * 锁定页面滚动并拦截菜单之外的滚轮/触摸滚动,避免浮窗锚点随页面滚动而"飘移"。
+     * 子菜单不受该 prop 影响,只有根菜单会加锁。
+     */
+    modal?: boolean;
+}

package/dist/components/context-menu/ContextMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { ContextMenu } from './ContextMenu';
+export { ContextMenuContext, useContextMenuContext, } from './ContextMenu.context';
+export type { ContextMenuProps } from './ContextMenu.types';

package/dist/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.d.ts

@@ -0,0 +1,6 @@
+import { ContextMenuCheckboxItemProps } from './ContextMenuCheckboxItem.types';
+/**
+ * 可勾选的菜单项(toggle),角色为 `menuitemcheckbox`。
+ * 与 Base UI 一致:点击后默认**不**关闭菜单,便于连续切换多个选项。
+ */
+export declare function ContextMenuCheckboxItem(props: ContextMenuCheckboxItemProps): import('solid-js').JSX.Element;

package/dist/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.js

@@ -0,0 +1,78 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { createChangeEventDetails as t } from "../context-menu.utils.js";
+import { useContextMenuEntry as n } from "../context-menu.entry.js";
+import { contextMenuCheckableItemClass as r, contextMenuIndicatorClass as i } from "../context-menu.styles.js";
+import { className as a, createComponent as o, delegateEvents as s, insert as c, mergeProps as l, spread as u, template as d, use as f } from "solid-js/web";
+import { Show as p, createSignal as m, splitProps as h } from "solid-js";
+import { Check as g } from "lucide-solid";
+//#region src/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.tsx
+var _ = /*#__PURE__*/ d("<div role=menuitemcheckbox tabindex=-1 data-slot=context-menu-checkbox-item><span>");
+function v(s) {
+	let [d, v] = h(s, [
+		"class",
+		"children",
+		"checked",
+		"defaultChecked",
+		"onCheckedChange",
+		"disabled",
+		"inset",
+		"label",
+		"closeOnClick",
+		"onClick"
+	]), [y, b] = m(s.defaultChecked ?? !1), x = () => s.checked === void 0 ? y() : s.checked, S, C = n({
+		component: "ContextMenuCheckboxItem",
+		element: () => S,
+		disabled: () => !!d.disabled,
+		label: () => d.label
+	}), w = (e) => {
+		if (d.disabled || (d.onClick?.(e), e.defaultPrevented)) return;
+		let n = !x();
+		s.checked === void 0 && b(n), s.onCheckedChange?.(n, t("item-press", e, S)), d.closeOnClick && C.popup.closeAll("item-press", e);
+	};
+	return (() => {
+		var t = _(), n = t.firstChild;
+		return t.$$pointermove = () => C.highlight(), t.addEventListener("pointerenter", () => C.highlight()), t.$$click = w, f((e) => {
+			S = e;
+		}, t), u(t, l({
+			get id() {
+				return C.id;
+			},
+			get "aria-checked"() {
+				return x();
+			},
+			get "data-inset"() {
+				return d.inset ? "" : void 0;
+			},
+			get "data-checked"() {
+				return x() ? "" : void 0;
+			},
+			get "data-unchecked"() {
+				return x() ? void 0 : "";
+			},
+			get "data-highlighted"() {
+				return C.isActive() ? "" : void 0;
+			},
+			get "data-disabled"() {
+				return d.disabled ? "" : void 0;
+			},
+			get "aria-disabled"() {
+				return d.disabled ? "true" : void 0;
+			},
+			get class() {
+				return e(r, d.class);
+			}
+		}, v), !1, !0), a(n, i), c(n, o(p, {
+			get when() {
+				return x();
+			},
+			get children() {
+				return o(g, {});
+			}
+		})), c(t, () => d.children, null), t;
+	})();
+}
+s(["click", "pointermove"]);
+//#endregion
+export { v as ContextMenuCheckboxItem };
+
+//# sourceMappingURL=ContextMenuCheckboxItem.js.map

package/dist/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuCheckboxItem.js","names":["createSignal","Show","splitProps","clsx","Check","useContextMenuEntry","contextMenuCheckableItemClass","contextMenuIndicatorClass","createChangeEventDetails","ContextMenuCheckboxItemProps","ContextMenuCheckboxItem","props","local","rest","internalChecked","setInternalChecked","defaultChecked","checked","undefined","element","HTMLDivElement","entry","component","disabled","label","handleClick","e","MouseEvent","onClick","defaultPrevented","next","onCheckedChange","closeOnClick","popup","closeAll","_el$","_tmpl$","_el$2","firstChild","$$pointermove","highlight","addEventListener","$$click","_$use","el","_$spread","_$mergeProps","id","aria-checked","data-inset","inset","data-checked","data-unchecked","data-highlighted","isActive","data-disabled","aria-disabled","class","_$className","_$insert","_$createComponent","when","children","_$delegateEvents","_$mergeProps","_$createComponent","_$delegateEvents","_tmpl$","ContextMenuCheckboxItem","local","rest","splitProps","props","internalChecked","setInternalChecked","createSignal","checked","element","entry","useContextMenuEntry","handleClick","next","createChangeEventDetails","_el$","_el$2","use","el","spread","mergeProps","\"class\"","clsx","contextMenuCheckableItemClass","className","contextMenuIndicatorClass","insert","createComponent","Show","Check","delegateEvents"],"sources":["../../../../src/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.tsx"],"sourcesContent":["import { createSignal, Show, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { Check } from \"lucide-solid\";\nimport { useContextMenuEntry } from \"../context-menu.entry\";\nimport {\n  contextMenuCheckableItemClass,\n  contextMenuIndicatorClass,\n} from \"../context-menu.styles\";\nimport { createChangeEventDetails } from \"../context-menu.utils\";\nimport type { ContextMenuCheckboxItemProps } from \"./ContextMenuCheckboxItem.types\";\n\n/**\n * 可勾选的菜单项(toggle),角色为 `menuitemcheckbox`。\n * 与 Base UI 一致:点击后默认**不**关闭菜单,便于连续切换多个选项。\n */\nexport function ContextMenuCheckboxItem(props: ContextMenuCheckboxItemProps) {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"checked\",\n    \"defaultChecked\",\n    \"onCheckedChange\",\n    \"disabled\",\n    \"inset\",\n    \"label\",\n    \"closeOnClick\",\n    \"onClick\",\n  ]);\n\n  const [internalChecked, setInternalChecked] = createSignal(\n    props.defaultChecked ?? false,\n  );\n  const checked = () =>\n    props.checked !== undefined ? props.checked : internalChecked();\n\n  let element: HTMLDivElement | undefined;\n\n  const entry = useContextMenuEntry({\n    component: \"ContextMenuCheckboxItem\",\n    element: () => element,\n    disabled: () => !!local.disabled,\n    label: () => local.label,\n  });\n\n  const handleClick = (e: MouseEvent) => {\n    if (local.disabled) return;\n    local.onClick?.(e);\n    if (e.defaultPrevented) return;\n\n    const next = !checked();\n    if (props.checked === undefined) setInternalChecked(next);\n    props.onCheckedChange?.(\n      next,\n      createChangeEventDetails(\"item-press\", e, element),\n    );\n\n    if (local.closeOnClick) entry.popup.closeAll(\"item-press\", e);\n  };\n\n  return (\n    <div\n      ref={(el) => {\n        element = el;\n      }}\n      id={entry.id}\n      role=\"menuitemcheckbox\"\n      tabIndex={-1}\n      aria-checked={checked()}\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={local.inset ? \"\" : undefined}\n      data-checked={checked() ? \"\" : undefined}\n      data-unchecked={checked() ? undefined : \"\"}\n      data-highlighted={entry.isActive() ? \"\" : undefined}\n      data-disabled={local.disabled ? \"\" : undefined}\n      aria-disabled={local.disabled ? \"true\" : undefined}\n      onClick={handleClick}\n      onPointerEnter={() => entry.highlight()}\n      onPointerMove={() => entry.highlight()}\n      class={clsx(contextMenuCheckableItemClass, local.class)}\n      {...rest}\n    >\n      <span class={contextMenuIndicatorClass}>\n        <Show when={checked()}>\n          <Check />\n        </Show>\n      </span>\n      {local.children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgBU,EAAwBC,GAAqC;CAC3E,IAAM,CAACC,GAAOC,KAAQX,EAAWS,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAS,CACV,GAEK,CAACG,GAAiBC,KAAsBf,EAC5CW,EAAMK,kBAAkB,EAC1B,GACMC,UACJN,EAAMM,YAAYC,KAAAA,IAA4BJ,EAAgB,IAAhCH,EAAMM,SAElCE,GAEEE,IAAQhB,EAAoB;EAChCiB,WAAW;EACXH,eAAeA;EACfI,gBAAgB,CAAC,CAACX,EAAMW;EACxBC,aAAaZ,EAAMY;CACrB,CAAC,GAEKC,KAAeC,MAAkB;EAGrC,IAFId,EAAMW,aACVX,EAAMgB,UAAUF,CAAC,GACbA,EAAEG,mBAAkB;EAExB,IAAMC,IAAO,CAACb,EAAQ;EAOtB,AANIN,EAAMM,YAAYC,KAAAA,KAAWH,EAAmBe,CAAI,GACxDnB,EAAMoB,kBACJD,GACAtB,EAAyB,cAAckB,GAAGP,CAAO,CACnD,GAEIP,EAAMoB,gBAAcX,EAAMY,MAAMC,SAAS,cAAcR,CAAC;CAC9D;CAEA,cAAA;EAAA,IAAAS,IAAAC,EAAA,GAAAC,IAAAF,EAAAG;EA2BmB,OA3BnBH,EAAAI,sBAkByBlB,EAAMmB,UAAU,GAACL,EAAAM,iBAAA,sBADhBpB,EAAMmB,UAAU,CAAC,GAAAL,EAAAO,UAD9BjB,GAAWkB,GAddC,MAAO;GACXzB,IAAUyB;EACZ,GAACT,CAAA,GAAAU,EAAAV,GAAAW,EAAA;GAAA,IACDC,KAAE;IAAA,OAAE1B,EAAM0B;GAAE;GAAA,IAAA,iBAAA;IAAA,OAGE9B,EAAQ;GAAC;GAAA,IAAA,eAAA;IAAA,OAEXL,EAAMsC,QAAQ,KAAKhC,KAAAA;GAAS;GAAA,IAAA,iBAAA;IAAA,OAC1BD,EAAQ,IAAI,KAAKC,KAAAA;GAAS;GAAA,IAAA,mBAAA;IAAA,OACxBD,EAAQ,IAAIC,KAAAA,IAAY;GAAE;GAAA,IAAA,qBAAA;IAAA,OACxBG,EAAMiC,SAAS,IAAI,KAAKpC,KAAAA;GAAS;GAAA,IAAA,kBAAA;IAAA,OACpCN,EAAMW,WAAW,KAAKL,KAAAA;GAAS;GAAA,IAAA,kBAAA;IAAA,OAC/BN,EAAMW,WAAW,SAASL,KAAAA;GAAS;GAAA,IAAAuE,QAAA;IAAA,OAI3CtF,EAAKG,GAA+BM,EAAM6C,KAAK;GAAC;EAAA,GACnD5C,CAAI,GAAA,IAAA,EAAA,GAAA6C,EAAArB,GAEK9B,CAAyB,GAAAoD,EAAAtB,GAAAuB,EACnC3D,GAAI;GAAA,IAAC4D,OAAI;IAAA,OAAE5C,EAAQ;GAAC;GAAA,IAAA6C,WAAA;IAAA,OAAAF,EAClBxD,GAAK,CAAA,CAAA;GAAA;EAAA,CAAA,CAAA,GAAAuD,EAAAxB,SAGTvB,EAAMkD,UAAQ,IAAA,GAAA3B;CAAA,EAAA,CAAA;AAGrB;AAAC4B,EAAA,CAAA,SAAA,aAAA,CAAA"}

package/dist/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.types.d.ts

@@ -0,0 +1,20 @@
+import { ParentProps } from 'solid-js';
+import { BaseProps } from '../../../types';
+import { ContextMenuChangeEventDetails } from '../context-menu.types';
+/** ContextMenuCheckboxItem props,对齐 Base UI `ContextMenu.CheckboxItem` */
+export interface ContextMenuCheckboxItemProps extends BaseProps, ParentProps {
+    /** 受控勾选状态;不传则内部自管理 */
+    checked?: boolean;
+    /** 非受控模式下的初始勾选状态 */
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean, eventDetails: ContextMenuChangeEventDetails) => void;
+    disabled?: boolean;
+    /** 左侧对齐到带图标项的文字位置 */
+    inset?: boolean;
+    /** 键盘字符导航匹配用的文本 */
+    label?: string;
+    /** 点击后是否关闭菜单,默认 false(与 Base UI 一致) */
+    closeOnClick?: boolean;
+    onClick?: (event: MouseEvent) => void;
+    [key: string]: any;
+}

package/dist/components/context-menu/ContextMenuCheckboxItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ContextMenuCheckboxItem } from './ContextMenuCheckboxItem';
+export type { ContextMenuCheckboxItemProps } from './ContextMenuCheckboxItem.types';

package/dist/components/context-menu/ContextMenuContent/ContextMenuContent.d.ts

@@ -0,0 +1,9 @@
+import { ContextMenuContentProps } from './ContextMenuContent.types';
+/**
+ * ContextMenu 的浮层内容:Portal + Positioner + Popup 三者的组合,
+ * 对应 shadcn 的 `<ContextMenuContent>`。
+ *
+ * 锚点是根组件根据鼠标坐标生成的虚拟元素,所以定位方式是 position:fixed
+ * (Portal 到 body 后不受祖先定位影响)。
+ */
+export declare function ContextMenuContent(props: ContextMenuContentProps): import('solid-js').JSX.Element;

package/dist/components/context-menu/ContextMenuContent/ContextMenuContent.js

@@ -0,0 +1,64 @@
+import { useContextMenuContext as e } from "../ContextMenu/ContextMenu.context.js";
+import { ContextMenuPopupSurface as t } from "./ContextMenuPopupSurface.js";
+import { createContextMenuPopupRuntime as n } from "./useContextMenuContent.js";
+import { createComponent as r } from "solid-js/web";
+import { createEffect as i, splitProps as a } from "solid-js";
+//#region src/components/context-menu/ContextMenuContent/ContextMenuContent.tsx
+function o(o) {
+	let s = e("ContextMenuContent"), [c, l] = a(o, [
+		"class",
+		"style",
+		"children",
+		"side",
+		"align",
+		"sideOffset",
+		"alignOffset",
+		"collisionPadding",
+		"dir",
+		"finalFocus",
+		"onKeyDown"
+	]), u = () => c.side ?? "right", d = n({
+		root: s,
+		open: s.open,
+		isSubmenu: !1,
+		reference: s.anchor,
+		side: u,
+		align: () => c.align ?? "start",
+		sideOffset: () => c.sideOffset ?? 0,
+		alignOffset: () => c.alignOffset ?? 4,
+		collisionPadding: () => c.collisionPadding ?? 5,
+		dir: () => c.dir
+	});
+	return i(() => s.setFinalFocus(c.finalFocus !== !1)), r(t, {
+		runtime: d,
+		dataSlot: "context-menu-content",
+		get contentId() {
+			return s.contentId;
+		},
+		get open() {
+			return s.open;
+		},
+		side: u,
+		dir: () => c.dir,
+		get registerMenuElement() {
+			return s.registerMenuElement;
+		},
+		get class() {
+			return c.class;
+		},
+		get style() {
+			return c.style;
+		},
+		get onKeyDown() {
+			return c.onKeyDown;
+		},
+		rest: l,
+		get children() {
+			return c.children;
+		}
+	});
+}
+//#endregion
+export { o as ContextMenuContent };
+
+//# sourceMappingURL=ContextMenuContent.js.map

package/dist/components/context-menu/ContextMenuContent/ContextMenuContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuContent.js","names":["createEffect","splitProps","useContextMenuContext","ContextMenuPopupSurface","ContextMenuContentProps","createContextMenuPopupRuntime","ContextMenuContent","props","root","local","rest","side","align","runtime","open","isSubmenu","reference","anchor","sideOffset","alignOffset","collisionPadding","dir","setFinalFocus","finalFocus","_$createComponent","dataSlot","contentId","registerMenuElement","class","style","onKeyDown","children","_$createComponent","ContextMenuContent","root","useContextMenuContext","local","rest","splitProps","props","side","runtime","createContextMenuPopupRuntime","createEffect","createComponent","ContextMenuPopupSurface","\"class\""],"sources":["../../../../src/components/context-menu/ContextMenuContent/ContextMenuContent.tsx"],"sourcesContent":["import { createEffect, splitProps } from \"solid-js\";\nimport { useContextMenuContext } from \"../ContextMenu/ContextMenu.context\";\nimport { ContextMenuPopupSurface } from \"./ContextMenuPopupSurface\";\nimport type { ContextMenuContentProps } from \"./ContextMenuContent.types\";\nimport { createContextMenuPopupRuntime } from \"./useContextMenuContent\";\n\n/**\n * ContextMenu 的浮层内容:Portal + Positioner + Popup 三者的组合,\n * 对应 shadcn 的 `<ContextMenuContent>`。\n *\n * 锚点是根组件根据鼠标坐标生成的虚拟元素,所以定位方式是 position:fixed\n * (Portal 到 body 后不受祖先定位影响)。\n */\nexport function ContextMenuContent(props: ContextMenuContentProps) {\n  const root = useContextMenuContext(\"ContextMenuContent\");\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"style\",\n    \"children\",\n    \"side\",\n    \"align\",\n    \"sideOffset\",\n    \"alignOffset\",\n    \"collisionPadding\",\n    \"dir\",\n    \"finalFocus\",\n    \"onKeyDown\",\n  ]);\n\n  const side = () => local.side ?? \"right\";\n  const align = () => local.align ?? \"start\";\n\n  const runtime = createContextMenuPopupRuntime({\n    root,\n    open: root.open,\n    isSubmenu: false,\n    reference: root.anchor,\n    side,\n    align,\n    sideOffset: () => local.sideOffset ?? 0,\n    alignOffset: () => local.alignOffset ?? 4,\n    collisionPadding: () => local.collisionPadding ?? 5,\n    dir: () => local.dir,\n  });\n\n  // Popup 的 finalFocus 是浮层级配置,但焦点回收由根组件统一执行,\n  // 因此这里把值同步给根状态。\n  createEffect(() => root.setFinalFocus(local.finalFocus !== false));\n\n  return (\n    <ContextMenuPopupSurface\n      runtime={runtime}\n      dataSlot=\"context-menu-content\"\n      contentId={root.contentId}\n      open={root.open}\n      side={side}\n      dir={() => local.dir}\n      registerMenuElement={root.registerMenuElement}\n      class={local.class}\n      style={local.style}\n      onKeyDown={local.onKeyDown}\n      rest={rest}\n    >\n      {local.children}\n    </ContextMenuPopupSurface>\n  );\n}\n"],"mappings":";;;;;;AAaA,SAAgBM,EAAmBC,GAAgC;CACjE,IAAMC,IAAON,EAAsB,oBAAoB,GACjD,CAACO,GAAOC,KAAQT,EAAWM,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAW,CACZ,GAEKI,UAAaF,EAAME,QAAQ,SAG3BE,IAAUR,EAA8B;EAC5CG;EACAM,MAAMN,EAAKM;EACXC,WAAW;EACXC,WAAWR,EAAKS;EAChBN;EACAC,aARkBH,EAAMG,SAAS;EASjCM,kBAAkBT,EAAMS,cAAc;EACtCC,mBAAmBV,EAAMU,eAAe;EACxCC,wBAAwBX,EAAMW,oBAAoB;EAClDC,WAAWZ,EAAMY;CACnB,CAAC;CAMD,OAFArB,QAAmBQ,EAAKc,cAAcb,EAAMc,eAAe,EAAK,CAAC,GAEjEC,EACGrB,GAAuB;EACbU;EACTY,UAAQ;EAAA,IACRC,YAAS;GAAA,OAAElB,EAAKkB;EAAS;EAAA,IACzBZ,OAAI;GAAA,OAAEN,EAAKM;EAAI;EACTH;EACNU,WAAWZ,EAAMY;EAAG,IACpBM,sBAAmB;GAAA,OAAEnB,EAAKmB;EAAmB;EAAA,IAAAmB,QAAA;GAAA,OACtCrC,EAAMmB;EAAK;EAAA,IAClBC,QAAK;GAAA,OAAEpB,EAAMoB;EAAK;EAAA,IAClBC,YAAS;GAAA,OAAErB,EAAMqB;EAAS;EACpBpB;EAAI,IAAAqB,WAAA;GAAA,OAETtB,EAAMsB;EAAQ;CAAA,CAAA;AAGrB"}

package/dist/components/context-menu/ContextMenuContent/ContextMenuContent.types.d.ts

@@ -0,0 +1,26 @@
+import { ParentProps } from 'solid-js';
+import { BaseProps } from '../../../types';
+import { ContextMenuAlign, ContextMenuSide } from '../context-menu.types';
+/**
+ * ContextMenuContent props:对齐 shadcn 的 `ContextMenuContent`
+ * (Base UI 的 `Popup` 属性 + `Positioner` 的 align/alignOffset/side/sideOffset)。
+ *
+ * 位置相关 prop 的默认值与 shadcn 保持一致:side="right"、align="start"、
+ * alignOffset=4、sideOffset=0;`collisionPadding` 对齐 Base UI 默认值 5。
+ */
+export interface ContextMenuContentProps extends BaseProps, ParentProps {
+    /** 贴锚点的哪一侧,默认 'right';支持 Base UI 的逻辑方向 inline-start/inline-end */
+    side?: ContextMenuSide;
+    /** 沿边对齐方式,默认 'start' */
+    align?: ContextMenuAlign;
+    /** 与锚点之间的间距(像素),默认 0 */
+    sideOffset?: number;
+    /** 沿对齐轴的偏移(像素),默认 4 */
+    alignOffset?: number;
+    /** 距视口边缘的最小间距(像素),默认 5 */
+    collisionPadding?: number;
+    /** 关闭后是否把焦点还给触发器,默认 true */
+    finalFocus?: boolean;
+    /** 其余原生 div 属性原样透传到 popup 元素 */
+    [key: string]: any;
+}

package/dist/components/context-menu/ContextMenuContent/ContextMenuPopupSurface.d.ts

@@ -0,0 +1,31 @@
+import { Accessor, JSX } from 'solid-js';
+import { ContextMenuSide } from '../context-menu.types';
+import { ContextMenuPopupRuntime } from './useContextMenuContent';
+export interface ContextMenuPopupSurfaceProps {
+    runtime: ContextMenuPopupRuntime;
+    /** popup 上的 data-slot 值(根菜单 / 子菜单不同) */
+    dataSlot: string;
+    /** positioner 上的 data-slot 值,默认 context-menu-positioner */
+    positionerSlot?: string;
+    contentId: string;
+    open: Accessor<boolean>;
+    side: Accessor<ContextMenuSide>;
+    dir: Accessor<"ltr" | "rtl" | "auto" | undefined>;
+    registerMenuElement: (el: HTMLElement) => () => void;
+    class?: string;
+    style?: JSX.CSSProperties;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    children: JSX.Element;
+    /** 其余透传到 popup 元素的属性 */
+    rest: Record<string, any>;
+}
+/**
+ * 菜单浮层的展示骨架,根菜单与子菜单共用。
+ *
+ * 结构分两层(与 Popover/Select 一致):外层只负责 translate 定位,内层负责
+ * 视觉样式与进出场动画。同一个元素不能既用 transform 定位又用 transform 做
+ * 缩放动画,否则动画播放期间会把定位 transform 整个顶掉。
+ */
+export declare function ContextMenuPopupSurface(props: ContextMenuPopupSurfaceProps): JSX.Element;