@neut/ui 0.0.15 → 0.0.16

package/dist/components/scroll-area/ScrollBar/ScrollBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollBar.js","names":["createMemo","createSignal","mergeProps","onCleanup","splitProps","ScrollBarProps","clsx","useScrollAreaContext","MIN_THUMB_PX","ScrollBar","props","ctx","trackEl","HTMLDivElement","merged","orientation","const","local","others","active","setActive","isVertical","metrics","vertical","horizontal","thumbStyle","m","trackSize","clientHeight","clientWidth","trackInnerSize","rawThumbSize","thumbRatio","thumbSize","Math","max","maxOffset","offset","thumbOffset","height","transform","width","ariaValueNow","round","onThumbPointerDown","e","PointerEvent","preventDefault","stopPropagation","viewport","viewportRef","setDragging","startPointer","clientY","clientX","startScroll","scrollTop","scrollLeft","maxScroll","scrollHeight","scrollWidth","currentTarget","scrollRatio","onMove","me","delta","newScroll","min","onUp","window","removeEventListener","addEventListener","onTrackPointerDown","target","HTMLElement","dataset","slot","rect","getBoundingClientRect","clickPos","top","left","scrollTo","behavior","onKeyDown","KeyboardEvent","step","pageSize","keyMap","Record","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","PageDown","PageUp","Home","Infinity","End","key","undefined","visible","hovering","dragging","_el$","_tmpl$","_el$2","firstChild","$$keydown","$$pointerdown","_ref$","_$use","_$spread","_$mergeProps","aria-orientation","aria-valuenow","data-orientation","data-hovering","class","_$effect","_p$","_v$","_v$2","_v$3","_$setAttribute","t","_$className","a","_$style","_$delegateEvents"],"sources":["../../../../src/components/scroll-area/ScrollBar/ScrollBar.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport type { ScrollBarProps } from \"./ScrollBar.types\";\nimport { clsx } from \"~/utils\";\nimport { useScrollAreaContext } from \"../ScrollArea\";\n\n// Minimum thumb length in px so it's always clickable\nconst MIN_THUMB_PX = 20;\n\nexport const ScrollBar = (props: ScrollBarProps) => {\n  const ctx = useScrollAreaContext();\n\n  let trackEl!: HTMLDivElement;\n\n  const merged = mergeProps({ orientation: \"vertical\" } as const, props);\n\n  const [local, others] = splitProps(merged, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  const [active, setActive] = createSignal(false);\n  const isVertical = () => local.orientation === \"vertical\";\n\n  const metrics = createMemo(() =>\n    isVertical() ? ctx.vertical() : ctx.horizontal(),\n  );\n\n  /**\n   * Compute thumb CSS: we clamp to MIN_THUMB_PX, then shift the offset so the\n   * thumb never overflows the track.\n   */\n  const thumbStyle = createMemo(() => {\n    const m = metrics();\n\n    const trackSize = isVertical()\n      ? (trackEl?.clientHeight ?? 0)\n      : (trackEl?.clientWidth ?? 0);\n\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const rawThumbSize = trackInnerSize * m.thumbRatio;\n    const thumbSize = Math.max(rawThumbSize, MIN_THUMB_PX);\n\n    // Adjust offset to account for clamping\n    const maxOffset = Math.max(0, trackInnerSize - thumbSize);\n    const offset = maxOffset * m.thumbOffset;\n\n    if (isVertical()) {\n      return {\n        height: `${thumbSize}px`,\n        transform: `translateY(${offset}px)`,\n      };\n    }\n    return {\n      width: `${thumbSize}px`,\n      transform: `translateX(${offset}px)`,\n    };\n  });\n\n  // ARIA value: 0–100 integer representing scroll position\n  const ariaValueNow = createMemo(() =>\n    Math.round(metrics().thumbOffset * 100),\n  );\n\n  // ── Drag handling ─────────────────────────────────────────────────────────\n  function onThumbPointerDown(e: PointerEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    ctx.setDragging(local.orientation);\n    setActive(true);\n\n    const startPointer = isVertical() ? e.clientY : e.clientX;\n    const startScroll = isVertical() ? viewport.scrollTop : viewport.scrollLeft;\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const trackSize = isVertical() ? trackEl.clientHeight : trackEl.clientWidth;\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const thumbSize = isVertical()\n      ? (e.currentTarget as HTMLDivElement).clientHeight\n      : (e.currentTarget as HTMLDivElement).clientWidth;\n    const scrollRatio = maxScroll / (trackInnerSize - thumbSize);\n\n    function onMove(me: PointerEvent) {\n      const delta = (isVertical() ? me.clientY : me.clientX) - startPointer;\n\n      const newScroll = Math.max(\n        0,\n        Math.min(maxScroll, startScroll + delta * scrollRatio),\n      );\n      if (isVertical()) {\n        viewport!.scrollTop = newScroll;\n      } else {\n        viewport!.scrollLeft = newScroll;\n      }\n    }\n\n    function onUp() {\n      ctx.setDragging(null);\n      setActive(false);\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    }\n\n    window.addEventListener(\"pointermove\", onMove);\n    window.addEventListener(\"pointerup\", onUp);\n\n    onCleanup(() => {\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    });\n  }\n\n  // ── Track click: page-scroll (click above/below thumb) ───────────────────\n  function onTrackPointerDown(e: PointerEvent) {\n    // Ignore if the target is the thumb itself\n    if ((e.target as HTMLElement).dataset.slot === \"scroll-area-thumb\") return;\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const rect = trackEl.getBoundingClientRect();\n    const clickPos = isVertical()\n      ? (e.clientY - rect.top) / rect.height\n      : (e.clientX - rect.left) / rect.width;\n\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const target = clickPos * maxScroll;\n\n    viewport.scrollTo({\n      [isVertical() ? \"top\" : \"left\"]: target,\n      behavior: \"smooth\",\n    });\n  }\n\n  // ── Keyboard scrolling on the scrollbar track ─────────────────────────────\n  function onKeyDown(e: KeyboardEvent) {\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const step = 40; // px per keypress\n    const pageSize = isVertical()\n      ? viewport.clientHeight\n      : viewport.clientWidth;\n\n    const keyMap: Record<string, number> = {\n      ArrowDown: step,\n      ArrowRight: step,\n      ArrowUp: -step,\n      ArrowLeft: -step,\n      PageDown: pageSize,\n      PageUp: -pageSize,\n      Home: -Infinity,\n      End: Infinity,\n    };\n\n    const delta = keyMap[e.key];\n    if (delta === undefined) return;\n\n    e.preventDefault();\n\n    if (isVertical()) {\n      viewport.scrollTop = Math.max(\n        0,\n        Math.min(\n          viewport.scrollHeight - viewport.clientHeight,\n          delta === Infinity\n            ? viewport.scrollHeight\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollTop + delta,\n        ),\n      );\n    } else {\n      viewport.scrollLeft = Math.max(\n        0,\n        Math.min(\n          viewport.scrollWidth - viewport.clientWidth,\n          delta === Infinity\n            ? viewport.scrollWidth\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollLeft + delta,\n        ),\n      );\n    }\n  }\n\n  // ── Visibility: show while hovering or dragging ───────────────────────────\n  const visible = createMemo(\n    () => ctx.hovering() || ctx.dragging() === props.orientation || active(),\n  );\n\n  return (\n    <div\n      ref={trackEl}\n      data-slot=\"scroll-area-scrollbar\"\n      // WCAG 4.1.2: expose as scrollbar widget\n      role=\"scrollbar\"\n      aria-controls=\"scroll-area-viewport\"\n      aria-orientation={local.orientation}\n      aria-valuenow={ariaValueNow()}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      tabIndex={0}\n      onPointerDown={onTrackPointerDown}\n      onKeyDown={onKeyDown}\n      data-orientation={local.orientation}\n      data-hovering={ctx.hovering() ? \"\" : undefined}\n      class={clsx(\n        // Layout\n        \"absolute touch-none select-none transition-opacity duration-150\",\n        // Opacity — visible on hover/drag, hidden otherwise\n        visible() ? \"opacity-100\" : \"opacity-0\",\n        // Axis-specific positioning & size\n        isVertical()\n          ? \"right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col\"\n          : \"bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row\",\n        // Keyboard focus ring\n        \"outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70\",\n        local.class,\n      )}\n      {...others}\n    >\n      <div\n        data-slot=\"scroll-area-thumb\"\n        onPointerDown={onThumbPointerDown}\n        data-orientation={local.orientation}\n        class={clsx(\n          \"relative rounded-full bg-border\",\n          // Hover / active state\n          \"hover:bg-neutral-400 dark:hover:bg-white/30\",\n          active() ? \"bg-neutral-500 dark:bg-white/40\" : \"\",\n          \"transition-colors duration-100\",\n          // Ensure thumb is always reachable\n          isVertical() ? \"min-h-5 w-full\" : \"min-w-5 h-full\",\n        )}\n        style={thumbStyle()}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ScrollBar.js","names":["createMemo","createSignal","mergeProps","onCleanup","splitProps","ScrollBarProps","clsx","useScrollAreaContext","MIN_THUMB_PX","ScrollBar","props","ctx","trackEl","HTMLDivElement","merged","orientation","const","local","others","active","setActive","isVertical","metrics","vertical","horizontal","thumbStyle","m","trackSize","clientHeight","clientWidth","trackInnerSize","rawThumbSize","thumbRatio","thumbSize","Math","max","maxOffset","offset","thumbOffset","height","transform","width","ariaValueNow","round","onThumbPointerDown","e","PointerEvent","preventDefault","stopPropagation","viewport","viewportRef","setDragging","startPointer","clientY","clientX","startScroll","scrollTop","scrollLeft","maxScroll","scrollHeight","scrollWidth","currentTarget","scrollRatio","onMove","me","delta","newScroll","min","onUp","window","removeEventListener","addEventListener","onTrackPointerDown","target","HTMLElement","dataset","slot","rect","getBoundingClientRect","clickPos","top","left","scrollTo","behavior","onKeyDown","KeyboardEvent","step","pageSize","keyMap","Record","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","PageDown","PageUp","Home","Infinity","End","key","undefined","visible","hovering","dragging","_el$","_tmpl$","_el$2","firstChild","$$keydown","$$pointerdown","_ref$","_$use","_$spread","_$mergeProps","aria-orientation","aria-valuenow","data-orientation","data-hovering","class","_$effect","_p$","_v$","_v$2","_v$3","_$setAttribute","t","_$className","a","_$style","_$delegateEvents","mergeProps","_$use","_$mergeProps","_$setAttribute","_$className","_$style","_$delegateEvents","mergeProps$1","_tmpl$","MIN_THUMB_PX","ScrollBar","ctx","useScrollAreaContext","trackEl","merged","props","local","others","splitProps","active","setActive","createSignal","isVertical","metrics","createMemo","thumbStyle","m","trackInnerSize","rawThumbSize","thumbSize","offset","ariaValueNow","onThumbPointerDown","viewport","startPointer","startScroll","maxScroll","scrollRatio","onMove","delta","me","newScroll","onUp","onCleanup","onTrackPointerDown","rect","target","onKeyDown","pageSize","visible","_el$","_el$2","_ref$","use","spread","mergeProps","\"class\"","clsx","effect","_v$","_v$2","_v$3","_p$","setAttribute","className","style","delegateEvents"],"sources":["../../../../src/components/scroll-area/ScrollBar/ScrollBar.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport type { ScrollBarProps } from \"./ScrollBar.types\";\nimport { clsx } from \"~/utils\";\nimport { useScrollAreaContext } from \"../ScrollArea\";\n\n// Minimum thumb length in px so it's always clickable\nconst MIN_THUMB_PX = 20;\n\nexport const ScrollBar = (props: ScrollBarProps) => {\n  const ctx = useScrollAreaContext();\n\n  let trackEl!: HTMLDivElement;\n\n  const merged = mergeProps({ orientation: \"vertical\" } as const, props);\n\n  const [local, others] = splitProps(merged, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  const [active, setActive] = createSignal(false);\n  const isVertical = () => local.orientation === \"vertical\";\n\n  const metrics = createMemo(() =>\n    isVertical() ? ctx.vertical() : ctx.horizontal(),\n  );\n\n  /**\n   * Compute thumb CSS: we clamp to MIN_THUMB_PX, then shift the offset so the\n   * thumb never overflows the track.\n   */\n  const thumbStyle = createMemo(() => {\n    const m = metrics();\n\n    const trackSize = isVertical()\n      ? (trackEl?.clientHeight ?? 0)\n      : (trackEl?.clientWidth ?? 0);\n\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const rawThumbSize = trackInnerSize * m.thumbRatio;\n    const thumbSize = Math.max(rawThumbSize, MIN_THUMB_PX);\n\n    // Adjust offset to account for clamping\n    const maxOffset = Math.max(0, trackInnerSize - thumbSize);\n    const offset = maxOffset * m.thumbOffset;\n\n    if (isVertical()) {\n      return {\n        height: `${thumbSize}px`,\n        transform: `translateY(${offset}px)`,\n      };\n    }\n    return {\n      width: `${thumbSize}px`,\n      transform: `translateX(${offset}px)`,\n    };\n  });\n\n  // ARIA value: 0–100 integer representing scroll position\n  const ariaValueNow = createMemo(() =>\n    Math.round(metrics().thumbOffset * 100),\n  );\n\n  // ── Drag handling ─────────────────────────────────────────────────────────\n  function onThumbPointerDown(e: PointerEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    ctx.setDragging(local.orientation);\n    setActive(true);\n\n    const startPointer = isVertical() ? e.clientY : e.clientX;\n    const startScroll = isVertical() ? viewport.scrollTop : viewport.scrollLeft;\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const trackSize = isVertical() ? trackEl.clientHeight : trackEl.clientWidth;\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const thumbSize = isVertical()\n      ? (e.currentTarget as HTMLDivElement).clientHeight\n      : (e.currentTarget as HTMLDivElement).clientWidth;\n    const scrollRatio = maxScroll / (trackInnerSize - thumbSize);\n\n    function onMove(me: PointerEvent) {\n      const delta = (isVertical() ? me.clientY : me.clientX) - startPointer;\n\n      const newScroll = Math.max(\n        0,\n        Math.min(maxScroll, startScroll + delta * scrollRatio),\n      );\n      if (isVertical()) {\n        viewport!.scrollTop = newScroll;\n      } else {\n        viewport!.scrollLeft = newScroll;\n      }\n    }\n\n    function onUp() {\n      ctx.setDragging(null);\n      setActive(false);\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    }\n\n    window.addEventListener(\"pointermove\", onMove);\n    window.addEventListener(\"pointerup\", onUp);\n\n    onCleanup(() => {\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    });\n  }\n\n  // ── Track click: page-scroll (click above/below thumb) ───────────────────\n  function onTrackPointerDown(e: PointerEvent) {\n    // Ignore if the target is the thumb itself\n    if ((e.target as HTMLElement).dataset.slot === \"scroll-area-thumb\") return;\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const rect = trackEl.getBoundingClientRect();\n    const clickPos = isVertical()\n      ? (e.clientY - rect.top) / rect.height\n      : (e.clientX - rect.left) / rect.width;\n\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const target = clickPos * maxScroll;\n\n    viewport.scrollTo({\n      [isVertical() ? \"top\" : \"left\"]: target,\n      behavior: \"smooth\",\n    });\n  }\n\n  // ── Keyboard scrolling on the scrollbar track ─────────────────────────────\n  function onKeyDown(e: KeyboardEvent) {\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const step = 40; // px per keypress\n    const pageSize = isVertical()\n      ? viewport.clientHeight\n      : viewport.clientWidth;\n\n    const keyMap: Record<string, number> = {\n      ArrowDown: step,\n      ArrowRight: step,\n      ArrowUp: -step,\n      ArrowLeft: -step,\n      PageDown: pageSize,\n      PageUp: -pageSize,\n      Home: -Infinity,\n      End: Infinity,\n    };\n\n    const delta = keyMap[e.key];\n    if (delta === undefined) return;\n\n    e.preventDefault();\n\n    if (isVertical()) {\n      viewport.scrollTop = Math.max(\n        0,\n        Math.min(\n          viewport.scrollHeight - viewport.clientHeight,\n          delta === Infinity\n            ? viewport.scrollHeight\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollTop + delta,\n        ),\n      );\n    } else {\n      viewport.scrollLeft = Math.max(\n        0,\n        Math.min(\n          viewport.scrollWidth - viewport.clientWidth,\n          delta === Infinity\n            ? viewport.scrollWidth\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollLeft + delta,\n        ),\n      );\n    }\n  }\n\n  // ── Visibility: show while hovering or dragging ───────────────────────────\n  const visible = createMemo(\n    () => ctx.hovering() || ctx.dragging() === props.orientation || active(),\n  );\n\n  return (\n    <div\n      ref={trackEl}\n      data-slot=\"scroll-area-scrollbar\"\n      // WCAG 4.1.2: expose as scrollbar widget\n      role=\"scrollbar\"\n      aria-controls=\"scroll-area-viewport\"\n      aria-orientation={local.orientation}\n      aria-valuenow={ariaValueNow()}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      tabIndex={0}\n      onPointerDown={onTrackPointerDown}\n      onKeyDown={onKeyDown}\n      data-orientation={local.orientation}\n      data-hovering={ctx.hovering() ? \"\" : undefined}\n      class={clsx(\n        // Layout\n        \"absolute touch-none select-none transition-opacity duration-150\",\n        // Opacity — visible on hover/drag, hidden otherwise\n        visible() ? \"opacity-100\" : \"opacity-0\",\n        // Axis-specific positioning & size\n        isVertical()\n          ? \"right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col\"\n          : \"bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row\",\n        // Keyboard focus ring\n        \"outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70\",\n        local.class,\n      )}\n      {...others}\n    >\n      <div\n        data-slot=\"scroll-area-thumb\"\n        onPointerDown={onThumbPointerDown}\n        data-orientation={local.orientation}\n        class={clsx(\n          \"relative rounded-full bg-border\",\n          // Hover / active state\n          \"hover:bg-neutral-400 dark:hover:bg-white/30\",\n          active() ? \"bg-neutral-500 dark:bg-white/40\" : \"\",\n          \"transition-colors duration-100\",\n          // Ensure thumb is always reachable\n          isVertical() ? \"min-h-5 w-full\" : \"min-w-5 h-full\",\n        )}\n        style={thumbStyle()}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/scroll-arrows/ScrollArrowButton.d.ts

@@ -0,0 +1,9 @@
+import { ScrollArrowButtonProps } from './ScrollArrows.types';
+/**
+ * 单个滚动提示箭头：覆盖在列表上/下沿，悬停或按住时用 requestAnimationFrame
+ * 持续滚动目标容器，到边界后 scrollTop 不再变化即自动停止。
+ *
+ * 箭头是装饰元素(`aria-hidden`、不可聚焦)，无障碍仍由列表自身的
+ * listbox/aria-activedescendant 承担。
+ */
+export declare function ScrollArrowButton(props: ScrollArrowButtonProps): import('solid-js').JSX.Element;

package/dist/components/scroll-arrows/ScrollArrowButton.js

@@ -0,0 +1,51 @@
+import { clsx as e } from "../../utils/clsx.js";
+import { className as t, createComponent as n, effect as r, insert as i, memo as a, setAttribute as o, template as s, use as c } from "solid-js/web";
+import { Show as l, onCleanup as u } from "solid-js";
+import { ChevronDown as d, ChevronUp as f } from "lucide-solid";
+//#region src/components/scroll-arrows/ScrollArrowButton.tsx
+var p = /*#__PURE__*/ s("<div aria-hidden=true data-slot=scroll-arrow>");
+function m(s) {
+	let m, h = () => {
+		m !== void 0 && (cancelAnimationFrame(m), m = void 0);
+	}, g = () => {
+		let e = s.target();
+		if (!e) {
+			h();
+			return;
+		}
+		let t = Math.max(4, e.clientHeight / 24), n = e.scrollTop;
+		if (e.scrollTop = n + (s.direction === "down" ? t : -t), e.scrollTop === n) {
+			h();
+			return;
+		}
+		m = requestAnimationFrame(g);
+	}, _ = () => {
+		h(), m = requestAnimationFrame(g);
+	}, v = (e) => {
+		e.addEventListener("pointerenter", _), e.addEventListener("pointerdown", _), e.addEventListener("pointerleave", h), e.addEventListener("pointerup", h), e.addEventListener("pointercancel", h), u(() => {
+			h(), e.removeEventListener("pointerenter", _), e.removeEventListener("pointerdown", _), e.removeEventListener("pointerleave", h), e.removeEventListener("pointerup", h), e.removeEventListener("pointercancel", h);
+		});
+	};
+	return n(l, {
+		get when() {
+			return s.visible;
+		},
+		get children() {
+			var l = p();
+			return c(v, l), i(l, (() => {
+				var e = a(() => s.direction === "down");
+				return () => e() ? n(d, {}) : n(f, {});
+			})()), r((n) => {
+				var r = s.direction, i = e("absolute inset-x-0 z-10 flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground select-none [&_svg]:size-4", s.direction === "down" ? "bottom-0" : "top-0", s.class);
+				return r !== n.e && o(l, "data-direction", n.e = r), i !== n.t && t(l, n.t = i), n;
+			}, {
+				e: void 0,
+				t: void 0
+			}), l;
+		}
+	});
+}
+//#endregion
+export { m as ScrollArrowButton };
+
+//# sourceMappingURL=ScrollArrowButton.js.map

package/dist/components/scroll-arrows/ScrollArrowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArrowButton.js","names":["Show","onCleanup","ChevronDown","ChevronUp","clsx","ScrollArrowButtonProps","ScrollArrowButton","props","frame","stop","undefined","cancelAnimationFrame","loop","el","target","step","Math","max","clientHeight","before","scrollTop","direction","requestAnimationFrame","start","attach","HTMLDivElement","addEventListener","removeEventListener","_$createComponent","when","visible","children","_el$","_tmpl$","_$use","_$insert","_c$","_$memo","_$effect","_p$","_v$","_v$2","class","e","_$setAttribute","t","_$className","_$createComponent","_$memo","_$setAttribute","_$className","_tmpl$","ScrollArrowButton","frame","stop","loop","el","props","step","before","start","attach","onCleanup","createComponent","Show","_el$","use","insert","_c$","memo","ChevronDown","ChevronUp","effect","_v$","_v$2","clsx","_p$","setAttribute","className"],"sources":["../../../src/components/scroll-arrows/ScrollArrowButton.tsx"],"sourcesContent":["import { Show, onCleanup } from \"solid-js\";\nimport { ChevronDown, ChevronUp } from \"lucide-solid\";\nimport { clsx } from \"~/utils\";\nimport type { ScrollArrowButtonProps } from \"./ScrollArrows.types\";\n\n/**\n * 单个滚动提示箭头：覆盖在列表上/下沿，悬停或按住时用 requestAnimationFrame\n * 持续滚动目标容器，到边界后 scrollTop 不再变化即自动停止。\n *\n * 箭头是装饰元素(`aria-hidden`、不可聚焦)，无障碍仍由列表自身的\n * listbox/aria-activedescendant 承担。\n */\nexport function ScrollArrowButton(props: ScrollArrowButtonProps) {\n  let frame: number | undefined;\n\n  const stop = () => {\n    if (frame !== undefined) {\n      cancelAnimationFrame(frame);\n      frame = undefined;\n    }\n  };\n\n  const loop = () => {\n    const el = props.target();\n    if (!el) {\n      stop();\n      return;\n    }\n    // 每帧约滚动 1/24 高度，连续但不至于过快\n    const step = Math.max(4, el.clientHeight / 24);\n    const before = el.scrollTop;\n    el.scrollTop = before + (props.direction === \"down\" ? step : -step);\n    if (el.scrollTop === before) {\n      stop();\n      return;\n    }\n    frame = requestAnimationFrame(loop);\n  };\n\n  const start = () => {\n    stop();\n    frame = requestAnimationFrame(loop);\n  };\n\n  const attach = (el: HTMLDivElement) => {\n    el.addEventListener(\"pointerenter\", start);\n    el.addEventListener(\"pointerdown\", start);\n    el.addEventListener(\"pointerleave\", stop);\n    el.addEventListener(\"pointerup\", stop);\n    el.addEventListener(\"pointercancel\", stop);\n    onCleanup(() => {\n      stop();\n      el.removeEventListener(\"pointerenter\", start);\n      el.removeEventListener(\"pointerdown\", start);\n      el.removeEventListener(\"pointerleave\", stop);\n      el.removeEventListener(\"pointerup\", stop);\n      el.removeEventListener(\"pointercancel\", stop);\n    });\n  };\n\n  return (\n    <Show when={props.visible}>\n      <div\n        ref={attach}\n        aria-hidden=\"true\"\n        data-slot=\"scroll-arrow\"\n        data-direction={props.direction}\n        class={clsx(\n          \"absolute inset-x-0 z-10 flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground select-none [&_svg]:size-4\",\n          props.direction === \"down\" ? \"bottom-0\" : \"top-0\",\n          props.class,\n        )}\n      >\n        {props.direction === \"down\" ? <ChevronDown /> : <ChevronUp />}\n      </div>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;AAYA,SAAgBM,EAAkBC,GAA+B;CAC/D,IAAIC,GAEEC,UAAa;EACjB,AAAID,MAAUE,KAAAA,MACZC,qBAAqBH,CAAK,GAC1BA,IAAQE,KAAAA;CAEZ,GAEME,UAAa;EACjB,IAAMC,IAAKN,EAAMO,OAAO;EACxB,IAAI,CAACD,GAAI;GACPJ,EAAK;GACL;EACF;EAEA,IAAMM,IAAOC,KAAKC,IAAI,GAAGJ,EAAGK,eAAe,EAAE,GACvCC,IAASN,EAAGO;EAElB,IADAP,EAAGO,YAAYD,KAAUZ,EAAMc,cAAc,SAASN,IAAO,CAACA,IAC1DF,EAAGO,cAAcD,GAAQ;GAC3BV,EAAK;GACL;EACF;EACAD,IAAQc,sBAAsBV,CAAI;CACpC,GAEMW,UAAc;EAElBf,AADAC,EAAK,GACLD,IAAQc,sBAAsBV,CAAI;CACpC,GAEMY,KAAUX,MAAuB;EAMrCZ,AALAY,EAAGa,iBAAiB,gBAAgBH,CAAK,GACzCV,EAAGa,iBAAiB,eAAeH,CAAK,GACxCV,EAAGa,iBAAiB,gBAAgBjB,CAAI,GACxCI,EAAGa,iBAAiB,aAAajB,CAAI,GACrCI,EAAGa,iBAAiB,iBAAiBjB,CAAI,GACzCR,QAAgB;GAMdY,AALAJ,EAAK,GACLI,EAAGc,oBAAoB,gBAAgBJ,CAAK,GAC5CV,EAAGc,oBAAoB,eAAeJ,CAAK,GAC3CV,EAAGc,oBAAoB,gBAAgBlB,CAAI,GAC3CI,EAAGc,oBAAoB,aAAalB,CAAI,GACxCI,EAAGc,oBAAoB,iBAAiBlB,CAAI;EAC9C,CAAC;CACH;CAEA,OAAAmB,EACG5B,GAAI;EAAA,IAAC6B,OAAI;GAAA,OAAEtB,EAAMuB;EAAO;EAAA,IAAAC,WAAA;GAAA,IAAAC,IAAAC,EAAA;GAUpB,OAVoBC,EAEhBV,GAAMQ,CAAA,GAAAG,EAAAH,UAAA;IAAA,IAAAI,IAAAC,QAUV9B,EAAMc,cAAc,MAAM;IAAA,aAA1Be,EAAA,IAAAR,EAA8B1B,GAAW,CAAA,CAAA,IAAA0B,EAAOzB,GAAS,CAAA,CAAA;GAAG,EAAA,CAAA,CAAA,GAAAmC,GAAAC,MAAA;IAAA,IAAAC,IAP7CjC,EAAMc,WAASoB,IACxBrC,EACL,2IACAG,EAAMc,cAAc,SAAS,aAAa,SAC1Cd,EAAMmC,KACR;IAAC,OAAAF,MAAAD,EAAAI,KAAAC,EAAAZ,GAAA,kBAAAO,EAAAI,IAAAH,CAAA,GAAAC,MAAAF,EAAAM,KAAAC,EAAAd,GAAAO,EAAAM,IAAAJ,CAAA,GAAAF;GAAA,GAAA;IAAAI,GAAAjC,KAAAA;IAAAmC,GAAAnC,KAAAA;GAAA,CAAA,GAAAsB;EAAA;CAAA,CAAA;AAMT"}

package/dist/components/scroll-arrows/ScrollArrows.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'solid-js';
+import { ScrollArrowsProps } from './ScrollArrows.types';
+/**
+ * 列表/菜单弹层通用的滚动提示：隐藏原生滚动条后，在上/下沿叠加箭头，
+ * 提示该方向还有内容；悬停或按住箭头会持续滚动，到边界后箭头自动隐藏。
+ * 放在滚动容器(定位祖先)内部即可，需要容器自身是定位元素。
+ */
+export declare function ScrollArrows(props: ScrollArrowsProps): JSX.Element;

package/dist/components/scroll-arrows/ScrollArrows.js

@@ -0,0 +1,35 @@
+import { clsx as e } from "../../utils/clsx.js";
+import { useScrollEdges as t } from "../../hooks/useScrollEdges.js";
+import { ScrollArrowButton as n } from "./ScrollArrowButton.js";
+import { createComponent as r } from "solid-js/web";
+//#region src/components/scroll-arrows/ScrollArrows.tsx
+function i(i) {
+	let { canScrollUp: a, canScrollDown: o } = t(() => i.target());
+	return [r(n, {
+		direction: "up",
+		get visible() {
+			return a();
+		},
+		get target() {
+			return i.target;
+		},
+		get class() {
+			return e(i.class, i.upClass);
+		}
+	}), r(n, {
+		direction: "down",
+		get visible() {
+			return o();
+		},
+		get target() {
+			return i.target;
+		},
+		get class() {
+			return e(i.class, i.downClass);
+		}
+	})];
+}
+//#endregion
+export { i as ScrollArrows };
+
+//# sourceMappingURL=ScrollArrows.js.map

package/dist/components/scroll-arrows/ScrollArrows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArrows.js","names":["JSX","clsx","useScrollEdges","ScrollArrowButton","ScrollArrowsProps","ScrollArrows","props","Element","canScrollUp","canScrollDown","target","_$createComponent","direction","visible","class","upClass","downClass","_$createComponent","ScrollArrows","useScrollEdges","props","createComponent","ScrollArrowButton","canScrollUp","\"class\"","clsx","canScrollDown"],"sources":["../../../src/components/scroll-arrows/ScrollArrows.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useScrollEdges } from \"~/hooks\";\nimport { ScrollArrowButton } from \"./ScrollArrowButton\";\nimport type { ScrollArrowsProps } from \"./ScrollArrows.types\";\n\n/**\n * 列表/菜单弹层通用的滚动提示：隐藏原生滚动条后，在上/下沿叠加箭头，\n * 提示该方向还有内容；悬停或按住箭头会持续滚动，到边界后箭头自动隐藏。\n * 放在滚动容器(定位祖先)内部即可，需要容器自身是定位元素。\n */\nexport function ScrollArrows(props: ScrollArrowsProps): JSX.Element {\n  const { canScrollUp, canScrollDown } = useScrollEdges(() => props.target());\n\n  return (\n    <>\n      <ScrollArrowButton\n        direction=\"up\"\n        visible={canScrollUp()}\n        target={props.target}\n        class={clsx(props.class, props.upClass)}\n      />\n      <ScrollArrowButton\n        direction=\"down\"\n        visible={canScrollDown()}\n        target={props.target}\n        class={clsx(props.class, props.downClass)}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;AAWA,SAAgBK,EAAaC,GAAuC;CAClE,IAAM,EAAEE,gBAAaC,qBAAkBP,QAAqBI,EAAMI,OAAO,CAAC;CAE1E,OAAA,CAAAC,EAEKR,GAAiB;EAChBS,WAAS;EAAA,IACTC,UAAO;GAAA,OAAEL,EAAY;EAAC;EAAA,IACtBE,SAAM;GAAA,OAAEJ,EAAMI;EAAM;EAAA,IAAAc,QAAA;GAAA,OACbvB,EAAKK,EAAMQ,OAAOR,EAAMS,OAAO;EAAC;CAAA,CAAA,GAAAJ,EAExCR,GAAiB;EAChBS,WAAS;EAAA,IACTC,UAAO;GAAA,OAAEJ,EAAc;EAAC;EAAA,IACxBC,SAAM;GAAA,OAAEJ,EAAMI;EAAM;EAAA,IAAAc,QAAA;GAAA,OACbvB,EAAKK,EAAMQ,OAAOR,EAAMU,SAAS;EAAC;CAAA,CAAA,CAAA;AAIjD"}

package/dist/components/scroll-arrows/ScrollArrows.types.d.ts

@@ -0,0 +1,17 @@
+import { Accessor } from 'solid-js';
+export interface ScrollArrowsProps {
+    /** 滚动容器 accessor；组件内部据此计算上下边缘状态 */
+    target: Accessor<HTMLElement | undefined>;
+    /** 两个箭头共用的额外 class */
+    class?: string;
+    /** 顶部箭头额外 class(圆角等) */
+    upClass?: string;
+    /** 底部箭头额外 class(圆角等) */
+    downClass?: string;
+}
+export interface ScrollArrowButtonProps {
+    direction: "up" | "down";
+    visible: boolean;
+    target: Accessor<HTMLElement | undefined>;
+    class?: string;
+}

package/dist/components/scroll-arrows/index.d.ts

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

package/dist/components/scroll-arrows/index.js

@@ -0,0 +1,2 @@
+import { ScrollArrows as e } from "./ScrollArrows.js";
+export { e as ScrollArrows };

package/dist/components/select/Select/Select.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.context.js","names":[],"sources":["../../../../src/components/select/Select/Select.context.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\nimport type { SelectContextValue, SelectOptionValue } from \"./Select.types\";\n\nexport const SelectContext = createContext<SelectContextValue>();\n\nexport function useSelectContext(\n  component: string,\n): SelectContextValue<SelectOptionValue> {\n  const ctx = useContext(SelectContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <Select> 内部`);\n  }\n  return ctx;\n}\n"],"mappings":";;AAGA,IAAa,IAAgB,EAAkC;AAE/D,SAAgB,EACd,GACuC;CACvC,IAAM,IAAM,EAAW,CAAa;CACpC,IAAI,CAAC,GACH,MAAU,MAAM,IAAI,EAAU,oBAAoB;CAEpD,OAAO;AACT"}
+{"version":3,"file":"Select.context.js","names":["SelectContext","createContext","useSelectContext","ctx","useContext","component"],"sources":["../../../../src/components/select/Select/Select.context.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\nimport type { SelectContextValue, SelectOptionValue } from \"./Select.types\";\n\nexport const SelectContext = createContext<SelectContextValue>();\n\nexport function useSelectContext(\n  component: string,\n): SelectContextValue<SelectOptionValue> {\n  const ctx = useContext(SelectContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <Select> 内部`);\n  }\n  return ctx;\n}\n"],"mappings":";;AAGA,IAAaA,IAAgBC,EAAkC;AAE/D,SAAgBC,EACd,GACuC;CACvC,IAAMC,IAAMC,EAAWJ,CAAa;CACpC,IAAI,CAACG,GACH,MAAU,MAAM,IAAIE,EAAU,oBAAoB;CAEpD,OAAOF;AACT"}

package/dist/components/select/Select/Select.js

@@ -1,48 +1,51 @@
-import { SelectContext as e } from "./Select.context.js";
-import { createComponent as t } from "solid-js/web";
-import { createMemo as n, createSignal as r, createUniqueId as i } from "solid-js";
-import { createStore as a, produce as o } from "solid-js/store";
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+import { SelectContext as t } from "./Select.context.js";
+import { createComponent as n } from "solid-js/web";
+import { createMemo as r, createSignal as i, createUniqueId as a } from "solid-js";
+import { createStore as o, produce as s } from "solid-js/store";
 //#region src/components/select/Select/Select.tsx
-function s(s) {
-	let [c, l] = r(s.defaultValue), u = n(() => s.value === void 0 ? c() : s.value), d = (e) => {
-		s.value === void 0 && l(() => e), s.onValueChange?.(e);
-	}, [f, p] = r(s.defaultOpen ?? !1), m = n(() => s.open === void 0 ? f() : s.open), h = n(() => !!s.disabled), g = (e) => {
-		s.open === void 0 && p(e), s.onOpenChange?.(e);
-	}, [_, v] = r(), [y, b] = r(), [x, S] = r(), [C, w] = a([]), T = `select-content-${i()}`, E = (e) => (w(o((t) => t.push(e))), () => w(o((t) => {
+function c(c) {
+	let [l, u] = i(c.defaultValue), d = r(() => c.value === void 0 ? l() : c.value), f = (e) => {
+		c.value === void 0 && u(() => e), c.onValueChange?.(e);
+	}, [p, m] = i(c.defaultOpen ?? !1), h = r(() => c.open === void 0 ? p() : c.open), g = r(() => !!c.disabled), _ = r(() => c.lockScroll ?? !0);
+	e(() => h() && _(), { allowedSelector: "[data-slot=\"select-content\"]" });
+	let v = (e) => {
+		c.open === void 0 && m(e), c.onOpenChange?.(e);
+	}, [y, b] = i(), [x, S] = i(), [C, w] = i(), [T, E] = o([]), D = `select-content-${a()}`, O = (e) => (E(s((t) => t.push(e))), () => E(s((t) => {
 		let n = t.findIndex((t) => t.value === e.value);
 		n !== -1 && t.splice(n, 1);
-	}))), D = () => g(!1), O = () => {
-		g(!1), _()?.focus?.();
-	}, k = {
-		value: u,
-		setValue: d,
-		open: m,
-		setOpen: g,
-		disabled: h,
-		contentId: T,
-		reference: _,
-		setReference: v,
-		floating: y,
-		setFloating: b,
+	}))), k = () => v(!1), A = () => {
+		v(!1), y()?.focus?.();
+	}, j = {
+		value: d,
+		setValue: f,
+		open: h,
+		setOpen: v,
+		disabled: g,
+		contentId: D,
+		reference: y,
+		setReference: b,
+		floating: x,
+		setFloating: S,
 		get items() {
-			return C;
+			return T;
 		},
-		registerItem: E,
-		activeValue: x,
-		setActiveValue: S,
+		registerItem: O,
+		activeValue: C,
+		setActiveValue: w,
 		selectValue: (e) => {
-			d(e), O();
+			f(e), A();
 		},
-		close: D
+		close: k
 	};
-	return t(e.Provider, {
-		value: k,
+	return n(t.Provider, {
+		value: j,
 		get children() {
-			return s.children;
+			return c.children;
 		}
 	});
 }
 //#endregion
-export { s as Select };
+export { c as Select };
 
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["createSignal","createMemo","createUniqueId","JSX","createStore","produce","SelectContext","SelectContextValue","SelectItemMeta","SelectOptionValue","SelectProps","Select","props","T","Element","internalValue","setInternalValue","defaultValue","value","undefined","setValue","v","onValueChange","internalOpen","setInternalOpen","defaultOpen","open","disabled","setOpen","next","onOpenChange","reference","setReference","floating","setFloating","HTMLElement","activeValue","setActiveValue","items","setItems","contentId","registerItem","item","list","push","idx","findIndex","it","splice","close","closeAndFocusTrigger","focus","selectValue","ctx","_$createComponent","Provider","children"],"sources":["../../../../src/components/select/Select/Select.tsx"],"sourcesContent":["import { createSignal, createMemo, createUniqueId, type JSX } from \"solid-js\";\nimport { createStore, produce } from \"solid-js/store\";\nimport { SelectContext } from \"./Select.context\";\nimport type {\n  SelectContextValue,\n  SelectItemMeta,\n  SelectOptionValue,\n  SelectProps,\n} from \"./Select.types\";\n\n/**\n * Select 根组件：不渲染任何 DOM，只负责状态管理 + 提供 context。\n * 真正的展示交给 <SelectTrigger>/<SelectValue>/<SelectContent>/<SelectItem>。\n *\n * 泛型 T 约束为 string | number，用于约束 value / defaultValue /\n * onValueChange / SelectItem.value 的类型。\n *\n * @example\n * ```tsx\n * <Select value={fruit()} onValueChange={setFruit}>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"选择一个水果\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">苹果</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport function Select<T extends SelectOptionValue = string>(\n  props: SelectProps<T>,\n): JSX.Element {\n  const [internalValue, setInternalValue] = createSignal<T | undefined>(\n    props.defaultValue,\n  );\n  const value = createMemo(() =>\n    props.value !== undefined ? props.value : internalValue(),\n  );\n\n  const setValue = (v: T) => {\n    if (props.value === undefined) setInternalValue(() => v);\n    props.onValueChange?.(v);\n  };\n\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\n  const setOpen = (next: boolean) => {\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n\n  const [reference, setReference] = createSignal<Element>();\n  const [floating, setFloating] = createSignal<HTMLElement>();\n  const [activeValue, setActiveValue] = createSignal<T>();\n  const [items, setItems] = createStore<SelectItemMeta<SelectOptionValue>[]>(\n    [],\n  );\n  const contentId = `select-content-${createUniqueId()}`;\n\n  const registerItem = (item: SelectItemMeta<SelectOptionValue>) => {\n    setItems(produce((list) => list.push(item)));\n    return () =>\n      setItems(\n        produce((list) => {\n          const idx = list.findIndex((it) => it.value === item.value);\n          if (idx !== -1) list.splice(idx, 1);\n        }),\n      );\n  };\n\n  const close = () => setOpen(false);\n\n  const closeAndFocusTrigger = () => {\n    setOpen(false);\n    (reference() as HTMLElement | undefined)?.focus?.();\n  };\n\n  const selectValue = (v: SelectOptionValue) => {\n    setValue(v as T);\n    closeAndFocusTrigger();\n  };\n\n  const ctx: SelectContextValue = {\n    value: value as SelectContextValue[\"value\"],\n    setValue: setValue as SelectContextValue[\"setValue\"],\n    open,\n    setOpen,\n    disabled,\n    contentId,\n    reference,\n    setReference,\n    floating,\n    setFloating,\n    get items() {\n      return items;\n    },\n    registerItem,\n    activeValue: activeValue as SelectContextValue[\"activeValue\"],\n    setActiveValue: setActiveValue as SelectContextValue[\"setActiveValue\"],\n    selectValue,\n    close,\n  };\n\n  return (\n    <SelectContext.Provider value={ctx}>\n      {props.children}\n    </SelectContext.Provider>\n  );\n}\n"],"mappings":";;;;;AA6BA,SAAgBW,EACdC,GACa;CACb,IAAM,CAACG,GAAeC,KAAoBhB,EACxCY,EAAMK,YACR,GACMC,IAAQjB,QACZW,EAAMM,UAAUC,KAAAA,IAA0BJ,EAAc,IAA5BH,EAAMM,KACpC,GAEME,KAAYC,MAAS;EAEzBT,AADIA,EAAMM,UAAUC,KAAAA,KAAWH,QAAuBK,CAAC,GACvDT,EAAMU,gBAAgBD,CAAC;CACzB,GAEM,CAACE,GAAcC,KAAmBxB,EACtCY,EAAMa,eAAe,EACvB,GACMC,IAAOzB,QACXW,EAAMc,SAASP,KAAAA,IAAyBI,EAAa,IAA1BX,EAAMc,IACnC,GACMC,IAAW1B,QAAiB,CAAC,CAACW,EAAMe,QAAQ,GAE5CC,KAAWC,MAAkB;EAEjCjB,AADIA,EAAMc,SAASP,KAAAA,KAAWK,EAAgBK,CAAI,GAClDjB,EAAMkB,eAAeD,CAAI;CAC3B,GAEM,CAACE,GAAWC,KAAgBhC,EAAsB,GAClD,CAACiC,GAAUC,KAAelC,EAA0B,GACpD,CAACoC,GAAaC,KAAkBrC,EAAgB,GAChD,CAACsC,GAAOC,KAAYnC,EACxB,CAAA,CACF,GACMoC,IAAY,kBAAkBtC,EAAe,KAE7CuC,KAAgBC,OACpBH,EAASlC,GAASsC,MAASA,EAAKC,KAAKF,CAAI,CAAC,CAAC,SAEzCH,EACElC,GAASsC,MAAS;EAChB,IAAME,IAAMF,EAAKG,WAAWC,MAAOA,EAAG7B,UAAUwB,EAAKxB,KAAK;EAC1D,AAAI2B,MAAQ,MAAIF,EAAKK,OAAOH,GAAK,CAAC;CACpC,CAAC,CACH,IAGEI,UAAcrB,EAAQ,EAAK,GAE3BsB,UAA6B;EAEjC,AADAtB,EAAQ,EAAK,GACb,EAAW,CAAC,EAA8BuB,QAAQ;CACpD,GAOME,IAA0B;EACvBnC;EACGE;EACVM;EACAE;EACAD;EACAa;EACAT;EACAC;EACAC;EACAC;EACA,IAAII,QAAQ;GACV,OAAOA;EACT;EACAG;EACaL;EACGC;EAChBe,cAtBmB/B,MAAyB;GAE5C6B,AADA9B,EAASC,CAAM,GACf6B,EAAqB;EACvB;EAoBED;CACF;CAEA,OAAAK,EACGhD,EAAciD,UAAQ;EAACrC,OAAOmC;EAAG,IAAAG,WAAA;GAAA,OAC/B5C,EAAM4C;EAAQ;CAAA,CAAA;AAGrB"}
+{"version":3,"file":"Select.js","names":["createSignal","createMemo","createUniqueId","JSX","createStore","produce","useScrollLock","SelectContext","SelectContextValue","SelectItemMeta","SelectOptionValue","SelectProps","Select","props","T","Element","internalValue","setInternalValue","defaultValue","value","undefined","setValue","v","onValueChange","internalOpen","setInternalOpen","defaultOpen","open","disabled","lockScroll","allowedSelector","setOpen","next","onOpenChange","reference","setReference","floating","setFloating","HTMLElement","activeValue","setActiveValue","items","setItems","contentId","registerItem","item","list","push","idx","findIndex","it","splice","close","closeAndFocusTrigger","focus","selectValue","ctx","_$createComponent","Provider","children","_$createComponent","Select","internalValue","setInternalValue","createSignal","props","value","createMemo","setValue","v","internalOpen","setInternalOpen","open","disabled","lockScroll","setOpen","next","reference","setReference","floating","setFloating","activeValue","setActiveValue","items","setItems","createStore","contentId","createUniqueId","registerItem","produce","list","item","idx","it","close","closeAndFocusTrigger","ctx","createComponent","SelectContext"],"sources":["../../../../src/components/select/Select/Select.tsx"],"sourcesContent":["import { createSignal, createMemo, createUniqueId, type JSX } from \"solid-js\";\nimport { createStore, produce } from \"solid-js/store\";\nimport { useScrollLock } from \"~/hooks\";\nimport { SelectContext } from \"./Select.context\";\nimport type {\n  SelectContextValue,\n  SelectItemMeta,\n  SelectOptionValue,\n  SelectProps,\n} from \"./Select.types\";\n\n/**\n * Select 根组件：不渲染任何 DOM，只负责状态管理 + 提供 context。\n * 真正的展示交给 <SelectTrigger>/<SelectValue>/<SelectContent>/<SelectItem>。\n *\n * 泛型 T 约束为 string | number，用于约束 value / defaultValue /\n * onValueChange / SelectItem.value 的类型。\n *\n * @example\n * ```tsx\n * <Select value={fruit()} onValueChange={setFruit}>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"选择一个水果\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">苹果</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport function Select<T extends SelectOptionValue = string>(\n  props: SelectProps<T>,\n): JSX.Element {\n  const [internalValue, setInternalValue] = createSignal<T | undefined>(\n    props.defaultValue,\n  );\n  const value = createMemo(() =>\n    props.value !== undefined ? props.value : internalValue(),\n  );\n\n  const setValue = (v: T) => {\n    if (props.value === undefined) setInternalValue(() => v);\n    props.onValueChange?.(v);\n  };\n\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 lockScroll = createMemo(() => props.lockScroll ?? true);\n\n  // 打开期间默认锁定页面滚动：锁住文档滚动并拦截浮层之外的滚轮/触摸，\n  // 面板自身仍可滚动。传 lockScroll={false} 可关闭该行为。\n  useScrollLock(() => open() && lockScroll(), {\n    allowedSelector: '[data-slot=\"select-content\"]',\n  });\n\n  const setOpen = (next: boolean) => {\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n\n  const [reference, setReference] = createSignal<Element>();\n  const [floating, setFloating] = createSignal<HTMLElement>();\n  const [activeValue, setActiveValue] = createSignal<T>();\n  const [items, setItems] = createStore<SelectItemMeta<SelectOptionValue>[]>(\n    [],\n  );\n  const contentId = `select-content-${createUniqueId()}`;\n\n  const registerItem = (item: SelectItemMeta<SelectOptionValue>) => {\n    setItems(produce((list) => list.push(item)));\n    return () =>\n      setItems(\n        produce((list) => {\n          const idx = list.findIndex((it) => it.value === item.value);\n          if (idx !== -1) list.splice(idx, 1);\n        }),\n      );\n  };\n\n  const close = () => setOpen(false);\n\n  const closeAndFocusTrigger = () => {\n    setOpen(false);\n    (reference() as HTMLElement | undefined)?.focus?.();\n  };\n\n  const selectValue = (v: SelectOptionValue) => {\n    setValue(v as T);\n    closeAndFocusTrigger();\n  };\n\n  const ctx: SelectContextValue = {\n    value: value as SelectContextValue[\"value\"],\n    setValue: setValue as SelectContextValue[\"setValue\"],\n    open,\n    setOpen,\n    disabled,\n    contentId,\n    reference,\n    setReference,\n    floating,\n    setFloating,\n    get items() {\n      return items;\n    },\n    registerItem,\n    activeValue: activeValue as SelectContextValue[\"activeValue\"],\n    setActiveValue: setActiveValue as SelectContextValue[\"setActiveValue\"],\n    selectValue,\n    close,\n  };\n\n  return (\n    <SelectContext.Provider value={ctx}>\n      {props.children}\n    </SelectContext.Provider>\n  );\n}\n"],"mappings":";;;;;;AA8BA,SAAgBY,EACdC,GACa;CACb,IAAM,CAACG,GAAeC,KAAoBjB,EACxCa,EAAMK,YACR,GACMC,IAAQlB,QACZY,EAAMM,UAAUC,KAAAA,IAA0BJ,EAAc,IAA5BH,EAAMM,KACpC,GAEME,KAAYC,MAAS;EAEzBT,AADIA,EAAMM,UAAUC,KAAAA,KAAWH,QAAuBK,CAAC,GACvDT,EAAMU,gBAAgBD,CAAC;CACzB,GAEM,CAACE,GAAcC,KAAmBzB,EACtCa,EAAMa,eAAe,EACvB,GACMC,IAAO1B,QACXY,EAAMc,SAASP,KAAAA,IAAyBI,EAAa,IAA1BX,EAAMc,IACnC,GACMC,IAAW3B,QAAiB,CAAC,CAACY,EAAMe,QAAQ,GAC5CC,IAAa5B,QAAiBY,EAAMgB,cAAc,EAAI;CAI5DvB,QAAoBqB,EAAK,KAAKE,EAAW,GAAG,EAC1CC,iBAAiB,iCACnB,CAAC;CAED,IAAMC,KAAWC,MAAkB;EAEjCnB,AADIA,EAAMc,SAASP,KAAAA,KAAWK,EAAgBO,CAAI,GAClDnB,EAAMoB,eAAeD,CAAI;CAC3B,GAEM,CAACE,GAAWC,KAAgBnC,EAAsB,GAClD,CAACoC,GAAUC,KAAerC,EAA0B,GACpD,CAACuC,GAAaC,KAAkBxC,EAAgB,GAChD,CAACyC,GAAOC,KAAYtC,EACxB,CAAA,CACF,GACMuC,IAAY,kBAAkBzC,EAAe,KAE7C0C,KAAgBC,OACpBH,EAASrC,GAASyC,MAASA,EAAKC,KAAKF,CAAI,CAAC,CAAC,SAEzCH,EACErC,GAASyC,MAAS;EAChB,IAAME,IAAMF,EAAKG,WAAWC,MAAOA,EAAG/B,UAAU0B,EAAK1B,KAAK;EAC1D,AAAI6B,MAAQ,MAAIF,EAAKK,OAAOH,GAAK,CAAC;CACpC,CAAC,CACH,IAGEI,UAAcrB,EAAQ,EAAK,GAE3BsB,UAA6B;EAEjC,AADAtB,EAAQ,EAAK,GACb8C,EAAW,CAAC,EAA8BvB,QAAQ;CACpD,GAOME,IAA0B;EACvBrC;EACGE;EACVM;EACAI;EACAH;EACAe;EACAT;EACAC;EACAC;EACAC;EACA,IAAII,QAAQ;GACV,OAAOA;EACT;EACAG;EACaL;EACGC;EAChBe,cAtBmBjC,MAAyB;GAE5C+B,AADAhC,EAASC,CAAM,GACf+B,EAAqB;EACvB;EAoBED;CACF;CAEA,OAAAK,EACGlD,EAAcmD,UAAQ;EAACvC,OAAOqC;EAAG,IAAAG,WAAA;GAAA,OAC/B9C,EAAM8C;EAAQ;CAAA,CAAA;AAGrB"}

package/dist/components/select/Select/Select.types.d.ts

@@ -19,6 +19,11 @@ export interface SelectProps<T extends SelectOptionValue = string> extends Paren
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
+    /**
+     * 打开时是否锁定页面滚动，默认 true：锁住文档滚动并拦截浮层之外的
+     * 滚轮/触摸滚动，面板自身仍可滚动。
+     */
+    lockScroll?: boolean;
 }
 export interface SelectContextValue<T extends SelectOptionValue = SelectOptionValue> {
     value: Accessor<T | null | undefined>;

package/dist/components/select/SelectContent/SelectContent.d.ts

@@ -1,2 +1,2 @@
 import { SelectContentProps } from './SelectContent.types';
-export declare function SelectContent(props: SelectContentProps): import("solid-js").JSX.Element;
+export declare function SelectContent(props: SelectContentProps): import('solid-js').JSX.Element;

package/dist/components/select/SelectContent/SelectContent.js

@@ -1,80 +1,85 @@
 import { clsx as e } from "../../../utils/clsx.js";
 import { useSelectContent as t } from "./useSelectContent.js";
-import { Portal as n, createComponent as r, effect as i, insert as a, mergeProps as o, spread as s, style as c, template as l, use as u } from "solid-js/web";
-import { createEffect as d, createMemo as f, onCleanup as p, splitProps as m } from "solid-js";
+import { ScrollArrows as n } from "../../scroll-arrows/ScrollArrows.js";
+import { Portal as r, createComponent as i, effect as a, insert as o, mergeProps as s, spread as c, style as l, template as u, use as d } from "solid-js/web";
+import { createEffect as f, createMemo as p, onCleanup as m, splitProps as h } from "solid-js";
 //#region src/components/select/SelectContent/SelectContent.tsx
-var h = /*#__PURE__*/ l("<div data-slot=select-content style=z-index:1000><div role=listbox>");
-function g(l) {
-	let { ctx: g, pos: _, maxHeight: v, isVisible: y, animationState: b, contentElement: x, setContentElement: S } = t(() => l), [C, w] = m(l, [
+var g = /*#__PURE__*/ u("<div data-slot=select-content style=z-index:1000><div role=listbox>");
+function _(u) {
+	let { ctx: _, pos: v, maxHeight: y, isVisible: b, animationState: x, contentElement: S, setContentElement: C } = t(() => u), [w, T] = h(u, [
 		"placement",
 		"collisionPadding",
 		"class",
 		"style",
 		"children"
-	]), T = f(() => g.items.filter((e) => !e.disabled)), E = (e) => {
-		let t = T();
+	]), E = p(() => _.items.filter((e) => !e.disabled)), D = (e) => {
+		let t = E();
 		if (t.length === 0) return;
-		let n = (t.findIndex((e) => e.value === g.activeValue()) + e + t.length) % t.length;
-		g.setActiveValue(t[n].value);
-	}, D = (e) => {
+		let n = (t.findIndex((e) => e.value === _.activeValue()) + e + t.length) % t.length;
+		_.setActiveValue(t[n].value);
+	}, O = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), E(1);
+				e.preventDefault(), D(1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), E(-1);
+				e.preventDefault(), D(-1);
 				break;
 			case "Enter":
 			case " ":
-				e.preventDefault(), g.activeValue() !== void 0 && g.selectValue(g.activeValue());
+				e.preventDefault(), _.activeValue() !== void 0 && _.selectValue(_.activeValue());
 				break;
 			case "Escape":
-				e.preventDefault(), g.close();
+				e.preventDefault(), _.close();
 				break;
-			case "Tab": g.setOpen(!1);
+			case "Tab": _.setOpen(!1);
 		}
 	};
-	return d(() => {
-		if (!g.open()) return;
+	return f(() => {
+		if (!_.open()) return;
 		let e = (e) => {
 			let t = e.target;
-			!g.reference()?.contains(t) && !g.floating()?.contains(t) && (g.setOpen(!1), e.stopPropagation());
+			!_.reference()?.contains(t) && !_.floating()?.contains(t) && (_.setOpen(!1), e.stopPropagation());
 		};
-		document.addEventListener("pointerdown", e, { capture: !0 }), p(() => document.removeEventListener("pointerdown", e, { capture: !0 }));
-	}), d(() => {
-		g.open() && (document.addEventListener("keydown", D), p(() => document.removeEventListener("keydown", D)));
-	}), d(() => {
-		let e = g.activeValue(), t = x();
-		!e || !t || t.querySelector(`[data-value="${CSS.escape(String(e))}"]`)?.scrollIntoView({ block: "nearest" });
-	}), r(n, { get children() {
-		var t = h(), n = t.firstChild;
-		return u((e) => {
-			g.setFloating(e), p(() => g.setFloating(void 0));
-		}, t), u(S, n), s(n, o({
+		document.addEventListener("pointerdown", e, { capture: !0 }), m(() => document.removeEventListener("pointerdown", e, { capture: !0 }));
+	}), f(() => {
+		_.open() && (document.addEventListener("keydown", O), m(() => document.removeEventListener("keydown", O)));
+	}), f(() => {
+		let e = _.activeValue(), t = S();
+		e && t && t.querySelector(`[data-value="${CSS.escape(String(e))}"]`)?.scrollIntoView({ block: "nearest" });
+	}), i(r, { get children() {
+		var t = g(), r = t.firstChild;
+		return d((e) => {
+			_.setFloating(e), m(() => _.setFloating(void 0));
+		}, t), d(C, r), c(r, s({
 			get "data-state"() {
-				return b();
+				return x();
 			},
 			get style() {
 				return {
 					position: "relative",
-					width: _.middlewareData().matchWidth?.width ? `${_.middlewareData().matchWidth.width}px` : void 0,
-					"max-height": v() ? `${v()}px` : void 0,
+					width: v.middlewareData().matchWidth?.width ? `${v.middlewareData().matchWidth.width}px` : void 0,
+					"max-height": y() ? `${y()}px` : void 0,
 					overflow: "auto",
-					...typeof C.style == "object" ? C.style : void 0
+					...typeof w.style == "object" ? w.style : void 0
 				};
 			},
 			get class() {
-				return e("min-w-36", "rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", C.class);
+				return e("min-w-36", "no-scrollbar [&::-webkit-scrollbar]:hidden", "rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", w.class);
 			}
-		}, w), !1, !0), a(n, () => C.children), i((e) => c(t, {
-			..._.floatingStyles(),
-			opacity: y() && _.isPositioned() ? 1 : 0,
-			"pointer-events": y() ? "auto" : "none",
-			visibility: y() ? "visible" : "hidden"
+		}, T), !1, !0), o(r, () => w.children), o(t, i(n, {
+			target: S,
+			upClass: "rounded-t-lg",
+			downClass: "rounded-b-lg"
+		}), null), a((e) => l(t, {
+			...v.floatingStyles(),
+			opacity: b() && v.isPositioned() ? 1 : 0,
+			"pointer-events": b() ? "auto" : "none",
+			visibility: b() ? "visible" : "hidden"
 		}, e)), t;
 	} });
 }
 //#endregion
-export { g as SelectContent };
+export { _ as SelectContent };
 
 //# sourceMappingURL=SelectContent.js.map

package/dist/components/select/SelectContent/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.js","names":["onCleanup","splitProps","createMemo","createEffect","Portal","useSelectContent","SelectContentProps","clsx","SelectContent","props","ctx","pos","maxHeight","isVisible","animationState","contentElement","setContentElement","local","rest","enabledItems","items","filter","it","disabled","moveActive","dir","list","length","currentIndex","findIndex","value","activeValue","nextIndex","setActiveValue","onKeyDown","e","KeyboardEvent","key","preventDefault","undefined","selectValue","close","setOpen","open","onPointerDown","PointerEvent","target","Node","reference","contains","floating","stopPropagation","document","addEventListener","capture","removeEventListener","active","el","querySelector","HTMLElement","CSS","escape","String","scrollIntoView","block","_$createComponent","children","_el$","_tmpl$","_el$2","firstChild","_$use","setFloating","_$spread","_$mergeProps","data-state","style","position","width","middlewareData","matchWidth","overflow","class","_$insert","_$effect","_$p","_$style","floatingStyles","opacity","isPositioned","visibility"],"sources":["../../../../src/components/select/SelectContent/SelectContent.tsx"],"sourcesContent":["import { onCleanup, splitProps, createMemo, createEffect } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { useSelectContent } from \"./useSelectContent\";\nimport type { SelectContentProps } from \"./SelectContent.types\";\nimport { clsx } from \"~/utils\";\n\nexport function SelectContent(props: SelectContentProps) {\n  const {\n    ctx,\n    pos,\n    maxHeight,\n    isVisible,\n    animationState,\n    contentElement,\n    setContentElement,\n  } = useSelectContent(() => props);\n\n  const [local, rest] = splitProps(props, [\n    \"placement\",\n    \"collisionPadding\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const enabledItems = createMemo(() => ctx.items.filter((it) => !it.disabled));\n\n  const moveActive = (dir: 1 | -1) => {\n    const list = enabledItems();\n    if (list.length === 0) return;\n    const currentIndex = list.findIndex((it) => it.value === ctx.activeValue());\n    const nextIndex = (currentIndex + dir + list.length) % list.length;\n    ctx.setActiveValue(list[nextIndex].value);\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        moveActive(1);\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        moveActive(-1);\n        break;\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        if (ctx.activeValue() !== undefined)\n          ctx.selectValue(ctx.activeValue()!);\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        ctx.close();\n        break;\n      case \"Tab\":\n        ctx.setOpen(false);\n        break;\n    }\n  };\n\n  // 点击外部关闭：捕获阶段监听 + stopPropagation，在事件还没下沉到真正的目标\n  // 元素之前就拦截掉，避免点击穿透到浮层下面被盖住的元素（细节见\n  // production-tooltip 那边点击穿透问题的排查记录，这里直接复用同一个模式）。\n  createEffect(() => {\n    if (!ctx.open()) return;\n    const onPointerDown = (e: PointerEvent) => {\n      const target = e.target as Node;\n      if (\n        !ctx.reference()?.contains(target) &&\n        !ctx.floating()?.contains(target)\n      ) {\n        ctx.setOpen(false);\n        e.stopPropagation();\n      }\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown, { capture: true });\n    onCleanup(() =>\n      document.removeEventListener(\"pointerdown\", onPointerDown, {\n        capture: true,\n      }),\n    );\n  });\n\n  // 打开时把键盘事件绑到 document，这样不需要抢 focus 也能用方向键\n  createEffect(() => {\n    if (!ctx.open()) return;\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // 高亮项变化时自动滚动到可见区域\n  createEffect(() => {\n    const active = ctx.activeValue();\n    const el = contentElement();\n    if (!active || !el) return;\n    el.querySelector<HTMLElement>(\n      `[data-value=\"${CSS.escape(String(active))}\"]`,\n    )?.scrollIntoView({ block: \"nearest\" });\n  });\n\n  return (\n    <Portal>\n      {/*\n        外层：只负责定位（position:fixed 来自 floatingStyles），不参与动画。\n        它的 transform 专门用来做 translate(x,y) 定位——如果内层的 zoom-in-95\n        动画也放在这一层，两者会互相冲突（细节见 SelectContent.utils.ts 顶部\n        的注释）。\n\n        关闭时不再卸载整个 Portal，而是用 visibility/pointer-events 隐藏：\n        SelectItem 通过 onMount 向 ctx 注册 item 元数据，如果关闭时把子节点\n        卸载掉，ctx.items 会被清空，SelectValue 就无法再用 item.label 渲染\n        已选值。让子节点持续挂载，items 的注册生命周期才和 SelectContent\n        本身一致；隐藏只是视觉/交互上的关闭，不影响数据。\n      */}\n      <div\n        data-slot=\"select-content\"\n        ref={(el) => {\n          ctx.setFloating(el);\n          // 元素卸载时清空 ctx.floating()，避免后续读到已从 DOM 摘除的\n          // 僵尸节点（Solid 的 ref 回调只在创建时触发一次，不会自动在\n          // 卸载时传 undefined）。\n          onCleanup(() => ctx.setFloating(undefined));\n        }}\n        style={{\n          ...pos.floatingStyles(),\n          \"z-index\": 1000,\n          opacity: isVisible() && pos.isPositioned() ? 1 : 0,\n          \"pointer-events\": isVisible() ? \"auto\" : \"none\",\n          visibility: isVisible() ? \"visible\" : \"hidden\",\n        }}\n      >\n        {/*\n            内层：真正的视觉样式 + overflow:auto 滚动 + 进出场动画。\n            position: relative 是为了让它成为内部所有选项的 offsetParent——\n            \"选中项对齐\"这套定位策略要用 offsetTop 算选项在列表里的位置，\n            这个值必须相对\"真正会滚动的这个元素\"才准确，不能让它被外层\n            （不滚动）抢走 offsetParent 的身份。\n          */}\n        <div\n          ref={setContentElement}\n          role=\"listbox\"\n          data-state={animationState()}\n          style={{\n            position: \"relative\",\n            width: pos.middlewareData().matchWidth?.width\n              ? `${pos.middlewareData().matchWidth.width}px`\n              : undefined,\n            \"max-height\": maxHeight() ? `${maxHeight()}px` : undefined,\n            overflow: \"auto\",\n            ...(typeof local.style === \"object\" ? local.style : undefined),\n          }}\n          class={clsx(\n            \"min-w-36\",\n            \"rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100\",\n            // 只保留入场动画，没有退场动画：关闭瞬间外层直接 visibility:hidden，\n            // data-state 也立即切回 closed，没有退场动画阶段，自然不会出现\n            // 选中项变更时\"面板先跳一下再消失\"的问题。duration-100（100ms）\n            // 比默认的 150ms 更短——下拉菜单这种高频交互的组件，动画应该比\n            // tooltip 更快、更利落。\n            \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n            local.class,\n          )}\n          {...rest}\n        >\n          {local.children}\n        </div>\n      </div>\n    </Portal>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SelectContent.js","names":["onCleanup","splitProps","createMemo","createEffect","Portal","useSelectContent","ScrollArrows","SelectContentProps","clsx","SelectContent","props","ctx","pos","maxHeight","isVisible","animationState","contentElement","setContentElement","local","rest","enabledItems","items","filter","it","disabled","moveActive","dir","list","length","currentIndex","findIndex","value","activeValue","nextIndex","setActiveValue","onKeyDown","e","KeyboardEvent","key","preventDefault","undefined","selectValue","close","setOpen","open","onPointerDown","PointerEvent","target","Node","reference","contains","floating","stopPropagation","document","addEventListener","capture","removeEventListener","active","el","querySelector","HTMLElement","CSS","escape","String","scrollIntoView","block","_$createComponent","children","_el$","_tmpl$","_el$2","firstChild","_$use","setFloating","_$spread","_$mergeProps","data-state","style","position","width","middlewareData","matchWidth","overflow","class","_$insert","upClass","downClass","_$effect","_$p","_$style","floatingStyles","opacity","isPositioned","visibility","_$createComponent","_$mergeProps","_$style","_tmpl$","SelectContent","useSelectContent","props","local","rest","splitProps","enabledItems","createMemo","ctx","it","moveActive","list","nextIndex","dir","onKeyDown","createEffect","onPointerDown","target","onCleanup","active","el","contentElement","createComponent","Portal","_el$","_el$2","use","setContentElement","spread","mergeProps","animationState","pos","maxHeight","\"class\"","clsx","insert","ScrollArrows","effect","style","isVisible","_$p"],"sources":["../../../../src/components/select/SelectContent/SelectContent.tsx"],"sourcesContent":["import { onCleanup, splitProps, createMemo, createEffect } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { useSelectContent } from \"./useSelectContent\";\nimport { ScrollArrows } from \"~/components/scroll-arrows\";\nimport type { SelectContentProps } from \"./SelectContent.types\";\nimport { clsx } from \"~/utils\";\n\nexport function SelectContent(props: SelectContentProps) {\n  const {\n    ctx,\n    pos,\n    maxHeight,\n    isVisible,\n    animationState,\n    contentElement,\n    setContentElement,\n  } = useSelectContent(() => props);\n\n  const [local, rest] = splitProps(props, [\n    \"placement\",\n    \"collisionPadding\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const enabledItems = createMemo(() => ctx.items.filter((it) => !it.disabled));\n\n  const moveActive = (dir: 1 | -1) => {\n    const list = enabledItems();\n    if (list.length === 0) return;\n    const currentIndex = list.findIndex((it) => it.value === ctx.activeValue());\n    const nextIndex = (currentIndex + dir + list.length) % list.length;\n    ctx.setActiveValue(list[nextIndex].value);\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        moveActive(1);\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        moveActive(-1);\n        break;\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        if (ctx.activeValue() !== undefined)\n          ctx.selectValue(ctx.activeValue()!);\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        ctx.close();\n        break;\n      case \"Tab\":\n        ctx.setOpen(false);\n        break;\n    }\n  };\n\n  // 点击外部关闭：捕获阶段监听 + stopPropagation，在事件还没下沉到真正的目标\n  // 元素之前就拦截掉，避免点击穿透到浮层下面被盖住的元素（细节见\n  // production-tooltip 那边点击穿透问题的排查记录，这里直接复用同一个模式）。\n  createEffect(() => {\n    if (!ctx.open()) return;\n    const onPointerDown = (e: PointerEvent) => {\n      const target = e.target as Node;\n      if (\n        !ctx.reference()?.contains(target) &&\n        !ctx.floating()?.contains(target)\n      ) {\n        ctx.setOpen(false);\n        e.stopPropagation();\n      }\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown, { capture: true });\n    onCleanup(() =>\n      document.removeEventListener(\"pointerdown\", onPointerDown, {\n        capture: true,\n      }),\n    );\n  });\n\n  // 打开时把键盘事件绑到 document，这样不需要抢 focus 也能用方向键\n  createEffect(() => {\n    if (!ctx.open()) return;\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // 高亮项变化时自动滚动到可见区域\n  createEffect(() => {\n    const active = ctx.activeValue();\n    const el = contentElement();\n    if (!active || !el) return;\n    el.querySelector<HTMLElement>(\n      `[data-value=\"${CSS.escape(String(active))}\"]`,\n    )?.scrollIntoView({ block: \"nearest\" });\n  });\n\n  return (\n    <Portal>\n      {/*\n        外层：只负责定位（position:fixed 来自 floatingStyles），不参与动画。\n        它的 transform 专门用来做 translate(x,y) 定位——如果内层的 zoom-in-95\n        动画也放在这一层，两者会互相冲突（细节见 SelectContent.utils.ts 顶部\n        的注释）。\n\n        关闭时不再卸载整个 Portal，而是用 visibility/pointer-events 隐藏：\n        SelectItem 通过 onMount 向 ctx 注册 item 元数据，如果关闭时把子节点\n        卸载掉，ctx.items 会被清空，SelectValue 就无法再用 item.label 渲染\n        已选值。让子节点持续挂载，items 的注册生命周期才和 SelectContent\n        本身一致；隐藏只是视觉/交互上的关闭，不影响数据。\n      */}\n      <div\n        data-slot=\"select-content\"\n        ref={(el) => {\n          ctx.setFloating(el);\n          // 元素卸载时清空 ctx.floating()，避免后续读到已从 DOM 摘除的\n          // 僵尸节点（Solid 的 ref 回调只在创建时触发一次，不会自动在\n          // 卸载时传 undefined）。\n          onCleanup(() => ctx.setFloating(undefined));\n        }}\n        style={{\n          ...pos.floatingStyles(),\n          \"z-index\": 1000,\n          opacity: isVisible() && pos.isPositioned() ? 1 : 0,\n          \"pointer-events\": isVisible() ? \"auto\" : \"none\",\n          visibility: isVisible() ? \"visible\" : \"hidden\",\n        }}\n      >\n        {/*\n            内层：真正的视觉样式 + overflow:auto 滚动 + 进出场动画。\n            position: relative 是为了让它成为内部所有选项的 offsetParent——\n            \"选中项对齐\"这套定位策略要用 offsetTop 算选项在列表里的位置，\n            这个值必须相对\"真正会滚动的这个元素\"才准确，不能让它被外层\n            （不滚动）抢走 offsetParent 的身份。\n          */}\n        <div\n          ref={setContentElement}\n          role=\"listbox\"\n          data-state={animationState()}\n          style={{\n            position: \"relative\",\n            width: pos.middlewareData().matchWidth?.width\n              ? `${pos.middlewareData().matchWidth.width}px`\n              : undefined,\n            \"max-height\": maxHeight() ? `${maxHeight()}px` : undefined,\n            overflow: \"auto\",\n            ...(typeof local.style === \"object\" ? local.style : undefined),\n          }}\n          class={clsx(\n            \"min-w-36\",\n            \"no-scrollbar [&::-webkit-scrollbar]:hidden\",\n            \"rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100\",\n            // 只保留入场动画，没有退场动画：关闭瞬间外层直接 visibility:hidden，\n            // data-state 也立即切回 closed，没有退场动画阶段，自然不会出现\n            // 选中项变更时\"面板先跳一下再消失\"的问题。duration-100（100ms）\n            // 比默认的 150ms 更短——下拉菜单这种高频交互的组件，动画应该比\n            // tooltip 更快、更利落。\n            \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n            local.class,\n          )}\n          {...rest}\n        >\n          {local.children}\n        </div>\n        <ScrollArrows\n          target={contentElement}\n          upClass=\"rounded-t-lg\"\n          downClass=\"rounded-b-lg\"\n        />\n      </div>\n    </Portal>\n  );\n}\n"],"mappings":"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"}