@nexub/react 7.5.0 → 7.7.0

package/dist/components/FilterBuilder/FilterBuilder.js

@@ -12,6 +12,7 @@ import {
 } from "@nexub/core";
 import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Button } from "../Button/Button.js";
 import { IconButton } from "../IconButton/IconButton.js";
@@ -24,14 +25,20 @@ function FilterBuilder({ fields, value: valueProp, defaultValue, onValueChange,
     defaultValue: defaultValue ?? emptyFilter(),
     onChange: onValueChange
   });
+  const latest = React.useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    latest.current = value;
+  });
+  const update = React.useCallback((fn) => setValue(fn(latest.current)), [setValue]);
+  const deferred = React.useDeferredValue(value);
   return /* @__PURE__ */ jsx(
-    GroupView,
+    MemoGroupView,
     {
-      group: value,
+      group: deferred,
       fields,
       depth: 0,
       maxDepth,
-      onChange: setValue,
+      onChange: update,
       className
     }
   );
@@ -40,7 +47,7 @@ FilterBuilder.displayName = "FilterBuilder";
 function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, className }) {
   const t = useNexubMessages();
   const first = fields[0];
-  const setRules = (rules) => onChange({ ...group, rules });
+  const setRules = (fn) => onChange((g) => ({ ...g, rules: fn(g.rules) }));
   const newRule = () => newFilterRule(first);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -60,7 +67,7 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
               size: "sm",
               "aria-label": t.filterGroup(group.combinator),
               value: group.combinator,
-              onValueChange: (v) => v && onChange({ ...group, combinator: v }),
+              onValueChange: (v) => v && onChange((g) => ({ ...g, combinator: v })),
               children: [
                 /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "and", children: t.matchAll }),
                 /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "or", children: t.matchAny })
@@ -69,13 +76,13 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
           ),
           onRemove && /* @__PURE__ */ jsx(IconButton, { label: t.removeGroup, variant: "ghost", size: "sm", className: "ms-auto", onClick: onRemove, children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) })
         ] }),
-        group.rules.map((r, i) => {
-          const replace = (next) => setRules(group.rules.map((x, j) => j === i ? next : x));
-          const remove = () => setRules(group.rules.filter((_, j) => j !== i));
+        group.rules.map((r) => {
+          const replace = (fn) => setRules((rules) => rules.map((x) => x.id === r.id ? fn(x) : x));
+          const remove = () => setRules((rules) => rules.filter((x) => x.id !== r.id));
           return isFilterGroup(r) ? /* @__PURE__ */ jsx(GroupView, { group: r, fields, depth: depth + 1, maxDepth, onChange: replace, onRemove: remove }, r.id) : /* @__PURE__ */ jsx(RuleRow, { rule: r, fields, onChange: replace, onRemove: remove }, r.id);
         }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setRules([...group.rules, newRule()]), disabled: !first, children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setRules((rules) => [...rules, newRule()]), disabled: !first, children: [
             /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
             t.addFilter
           ] }),
@@ -84,7 +91,7 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
             {
               variant: "ghost",
               size: "sm",
-              onClick: () => setRules([...group.rules, { id: uid(), combinator: "and", rules: [newRule()] }]),
+              onClick: () => setRules((rules) => [...rules, { id: uid(), combinator: "and", rules: [newRule()] }]),
               disabled: !first,
               children: [
                 /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
@@ -97,6 +104,7 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
     }
   );
 }
+const MemoGroupView = React.memo(GroupView);
 function RuleRow({
   rule,
   fields,
@@ -104,6 +112,12 @@ function RuleRow({
   onRemove
 }) {
   const t = useNexubMessages();
+  const [draft, setDraft] = React.useState(rule.value);
+  const [seen, setSeen] = React.useState(rule.value);
+  if (rule.value !== seen) {
+    setSeen(rule.value);
+    setDraft(rule.value);
+  }
   const field = fields.find((f) => f.id === rule.field) ?? fields[0];
   const ops = filterOperators[field?.type ?? "text"];
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
@@ -114,7 +128,7 @@ function RuleRow({
         onValueChange: (id) => {
           const f = fields.find((x) => x.id === id);
           const nextOps = filterOperators[f?.type ?? "text"];
-          onChange({ ...rule, field: id, operator: nextOps.includes(rule.operator) ? rule.operator : nextOps[0], value: "" });
+          onChange((r) => ({ ...r, field: id, operator: nextOps.includes(r.operator) ? r.operator : nextOps[0], value: "" }));
         },
         children: [
           /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterField, className: "w-auto min-w-36", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
@@ -122,11 +136,11 @@ function RuleRow({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(Select.Root, { value: rule.operator, onValueChange: (op) => onChange({ ...rule, operator: op }), children: [
+    /* @__PURE__ */ jsxs(Select.Root, { value: rule.operator, onValueChange: (op) => onChange((r) => ({ ...r, operator: op })), children: [
       /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterOperator, className: "w-auto min-w-32", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
       /* @__PURE__ */ jsx(Select.Content, { children: ops.map((op) => /* @__PURE__ */ jsx(Select.Item, { value: op, children: t.filterOperators[op] }, op)) })
     ] }),
-    rule.operator !== "isEmpty" && (field?.type === "select" ? /* @__PURE__ */ jsxs(Select.Root, { value: rule.value || void 0, onValueChange: (v) => onChange({ ...rule, value: v }), children: [
+    rule.operator !== "isEmpty" && (field?.type === "select" ? /* @__PURE__ */ jsxs(Select.Root, { value: rule.value || void 0, onValueChange: (v) => onChange((r) => ({ ...r, value: v })), children: [
       /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterValue, className: "w-auto min-w-36", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
       /* @__PURE__ */ jsx(Select.Content, { children: field.options?.map((o) => /* @__PURE__ */ jsx(Select.Item, { value: o.value, children: o.label }, o.value)) })
     ] }) : /* @__PURE__ */ jsx(
@@ -134,8 +148,12 @@ function RuleRow({
       {
         "aria-label": t.filterValue,
         type: field?.type === "number" ? "number" : field?.type === "date" ? "date" : "text",
-        value: rule.value,
-        onChange: (e) => onChange({ ...rule, value: e.target.value }),
+        value: draft,
+        onChange: (e) => {
+          const v = e.target.value;
+          setDraft(v);
+          onChange((r) => ({ ...r, value: v }));
+        },
         wrapperClassName: "w-auto min-w-36 flex-1"
       }
     )),

package/dist/components/Heading/Heading.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ToneValue } from '../Button/Button.js';
 export declare const headingVariants: (props?: ({
-    size?: "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+    size?: "display" | "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
     weight?: "bold" | "regular" | "medium" | "semibold" | "extrabold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/IconButton/IconButton.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 export declare const iconButtonVariants: (props?: ({
-    variant?: "outline" | "solid" | "ghost" | "subtle" | null | undefined;
+    variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     label: string;
     asChild?: boolean;
+    /** Spinner replaces the icon (size kept); clicks are blocked, focus stays. */
+    loading?: boolean;
+    /** Built-in tooltip: content, or `true` to show `label`. No Provider needed. */
+    tooltip?: React.ReactNode;
 }
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -1,9 +1,12 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { disabledContainer, disabledText, pressable } from "../../utils/control.js";
+import { spinnerVariants } from "../Spinner/Spinner.js";
+const LazyTooltip = React.lazy(() => import("../Tooltip/Tooltip.js").then((m) => ({ default: m.Tooltip })));
 const iconButtonVariants = cva(
   [pressable, "relative inline-flex items-center justify-center flex-shrink-0"],
   {
@@ -30,18 +33,26 @@ const iconButtonVariants = cva(
   }
 );
 const IconButton = React.forwardRef(
-  ({ className, variant, size, label, asChild = false, children, ...props }, ref) => {
+  ({ className, variant, size, label, asChild = false, loading, tooltip, onClick, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
+    const button = /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
         "aria-label": label,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || props["aria-disabled"] || void 0,
         className: cn(iconButtonVariants({ variant, size }), "nx-hit", className),
+        onClick: (e) => {
+          if (loading) return e.preventDefault();
+          onClick?.(e);
+        },
         ...props,
-        children
+        children: loading && !asChild ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(spinnerVariants({ size: size === "xs" ? "xs" : "sm" }), "border-current border-t-transparent") }) : children
       }
     );
+    if (tooltip == null || tooltip === false) return button;
+    return /* @__PURE__ */ jsx(React.Suspense, { fallback: button, children: /* @__PURE__ */ jsx(LazyTooltip, { label: tooltip === true ? label : tooltip, children: button }) });
   }
 );
 IconButton.displayName = "IconButton";

package/dist/components/Kanban/Kanban.d.ts

@@ -14,7 +14,7 @@ export interface KanbanProps<T> {
     className?: string;
 }
 /**
- * Columns of cards people can move: drag a card, or focus its handle and press
+ * Columns of cards people can move: drag a card's handle (Escape cancels), or focus it and press
  * Alt+Arrow keys (up/down within a column, left/right across columns).
  */
 export declare function Kanban<T>({ columns, getId, getLabel, onChange, renderCard, className }: KanbanProps<T>): React.JSX.Element;

package/dist/components/Sortable/Sortable.d.ts

@@ -12,7 +12,7 @@ export interface SortableProps<T> {
     className?: string;
 }
 /**
- * A list people can reorder: drag an item, or focus its handle and press
- * Alt+ArrowUp / Alt+ArrowDown. Each move is announced.
+ * A list people can reorder: drag an item's handle (mouse, pen or touch; Escape
+ * cancels), or focus the handle and press Alt+ArrowUp / Alt+ArrowDown. Each move is announced.
  */
 export declare function Sortable<T>({ items, getId, getLabel, onReorder, children, className, ...aria }: SortableProps<T>): React.JSX.Element;

package/dist/components/Sortable/reorder.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-/** Internal: lists of items, moved by drag (native) or Alt+Arrow on a handle. */
+/** Internal: lists of items, moved by dragging a handle (Pointer Events) or Alt+Arrow on it. */
 export type Pos = [list: number, index: number];
 export declare function moveItem<T>(lists: T[][], [fc, fi]: Pos, [tc, ti]: Pos): T[][];
 interface ReorderOptions<T> {
@@ -10,18 +10,17 @@ interface ReorderOptions<T> {
     listLabels?: string[];
     onMove: (next: T[][]) => void;
 }
-/** Shared engine: drag state, keyboard moves, focus after a move, announcements. */
+type ItemProps = {
+    'data-nx-reorder-item': '';
+    'data-nx-dragging'?: '';
+    'data-nx-drop'?: 'before' | 'after';
+};
+/** Shared engine: pointer drag, keyboard moves, focus after a move, FLIP settle, announcements. */
 export declare function useReorder<T>({ lists, getId, getLabel, listLabels, onMove }: ReorderOptions<T>): {
-    itemProps: (pos: Pos) => {
-        draggable: boolean;
-        onDragStart: (e: React.DragEvent) => void;
-        onDragOver: (e: React.DragEvent) => void;
-        onDrop: (e: React.DragEvent) => void;
-        onDragEnd: () => void;
-    };
+    itemProps: (pos: Pos) => ItemProps;
     listProps: (list: number) => {
-        onDragOver: (e: React.DragEvent) => void;
-        onDrop: (e: React.DragEvent) => void;
+        ref: (el: HTMLElement | null) => void;
+        'data-nx-drop': string | undefined;
     };
     handle: (pos: Pos, className?: string) => React.JSX.Element;
     live: React.JSX.Element;

package/dist/components/Sortable/reorder.js

@@ -11,18 +11,69 @@ function moveItem(lists, [fc, fi], [tc, ti]) {
   next[tc].splice(Math.min(ti, next[tc].length), 0, item);
   return next;
 }
+const THRESHOLD = 4;
+const EDGE = 48;
+const MAX_SPEED = 16;
+const itemOf = (el) => el.closest("[data-nx-reorder-item]");
+function scrollParent(el, axis) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    const scrolls = axis === "y" ? /auto|scroll/.test(s.overflowY) && p.scrollHeight > p.clientHeight : /auto|scroll/.test(s.overflowX) && p.scrollWidth > p.clientWidth;
+    if (scrolls) return p;
+  }
+  return document.scrollingElement;
+}
+function edgeSpeed(at, start, end) {
+  if (at < start + EDGE) return -MAX_SPEED * Math.min(1, (start + EDGE - at) / EDGE);
+  if (at > end - EDGE) return MAX_SPEED * Math.min(1, (at - end + EDGE) / EDGE);
+  return 0;
+}
+const sameMark = (a, b) => a === b || !!a && !!b && a.edge === b.edge && ("id" in a ? "id" in b && a.id === b.id : "list" in b && a.list === b.list);
 function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
   const t = useNexubMessages();
   const { dir } = useLocale();
-  const dragged = React.useRef(null);
   const handles = React.useRef(/* @__PURE__ */ new Map());
+  const listEls = React.useRef(/* @__PURE__ */ new Map());
   const refocus = React.useRef(null);
+  const drag = React.useRef(null);
+  const flipFrom = React.useRef(null);
   const [announcement, setAnnouncement] = React.useState("");
+  const [dragging, setDragging] = React.useState(null);
+  const [mark, setMark] = React.useState(null);
+  const itemCache = React.useRef(/* @__PURE__ */ new Map());
   const hintId = React.useId();
   React.useEffect(() => {
     if (refocus.current) handles.current.get(refocus.current)?.focus();
     refocus.current = null;
   });
+  React.useLayoutEffect(() => {
+    const from = flipFrom.current;
+    flipFrom.current = null;
+    if (!from || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    for (const [id, h] of handles.current) {
+      const el = itemOf(h);
+      const old = from.get(id);
+      if (!el || !old) continue;
+      const now = el.getBoundingClientRect();
+      const dx = old.left - now.left;
+      const dy = old.top - now.top;
+      if (!dx && !dy) continue;
+      el.style.transition = "none";
+      el.style.transform = `translate(${dx}px, ${dy}px)`;
+      el.getBoundingClientRect();
+      el.style.transition = "transform var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing)";
+      el.style.transform = "";
+      el.addEventListener("transitionend", () => el.style.transition = "", { once: true });
+    }
+  });
+  const snapshot = () => {
+    const rects = /* @__PURE__ */ new Map();
+    for (const [id, h] of handles.current) {
+      const el = itemOf(h);
+      if (el) rects.set(id, el.getBoundingClientRect());
+    }
+    return rects;
+  };
   const move = (from, to, keepFocus) => {
     if (from[0] === to[0] && from[1] === to[1]) return;
     const item = lists[from[0]][from[1]];
@@ -30,40 +81,102 @@ function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
     const [tc] = to;
     const ti = next[tc].indexOf(item);
     if (keepFocus) refocus.current = getId(item);
+    flipFrom.current ??= snapshot();
     onMove(next);
     const total = next[tc].length;
     setAnnouncement(
       from[0] !== tc && listLabels?.[tc] ? t.itemMovedToColumn(getLabel(item), listLabels[tc], ti + 1, total) : t.itemMoved(getLabel(item), ti + 1, total)
     );
   };
-  const itemProps = (pos) => ({
-    draggable: true,
-    onDragStart: (e) => {
-      dragged.current = pos;
-      e.dataTransfer.effectAllowed = "move";
-    },
-    onDragOver: (e) => {
-      if (dragged.current) e.preventDefault();
-    },
-    onDrop: (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (dragged.current) move(dragged.current, pos, false);
-      dragged.current = null;
-    },
-    onDragEnd: () => {
-      dragged.current = null;
+  const targetAt = (d) => {
+    let list = d.from[0];
+    if (lists.length > 1) {
+      let best = Infinity;
+      for (const [l, el] of listEls.current) {
+        const r = el.getBoundingClientRect();
+        const dist = Math.hypot(Math.max(r.left - d.x, 0, d.x - r.right), Math.max(r.top - d.y, 0, d.y - r.bottom));
+        if (dist < best) [best, list] = [dist, l];
+      }
     }
-  });
+    const others = lists[list].filter((it) => getId(it) !== d.id);
+    let k = others.findIndex((it) => {
+      const h = handles.current.get(getId(it));
+      const r = h && itemOf(h)?.getBoundingClientRect();
+      return r && d.y < r.top + r.height / 2;
+    });
+    if (k < 0) k = others.length;
+    const to = [list, k];
+    if (list === d.from[0] && k === d.from[1]) return { to, mark: null };
+    const m = k < others.length ? { id: getId(others[k]), edge: "before" } : others.length ? { id: getId(others[others.length - 1]), edge: "after" } : { list, edge: "inside" };
+    return { to, mark: m };
+  };
+  const update = (d) => {
+    if (d.el && d.rect0) {
+      const r = d.el.getBoundingClientRect();
+      d.tx = d.x - d.x0 - (r.left - d.tx - d.rect0.left);
+      d.ty = d.y - d.y0 - (r.top - d.ty - d.rect0.top);
+      d.el.style.translate = `${d.tx}px ${d.ty}px`;
+    }
+    const { to, mark: m } = targetAt(d);
+    d.target = m ? to : null;
+    if (!sameMark(d.mark, m)) setMark(d.mark = m);
+  };
+  const tick = () => {
+    const d = drag.current;
+    if (!d?.active) return;
+    let scrolled = false;
+    d.scrollers.forEach((s, i) => {
+      if (!s) return;
+      const page = s === document.scrollingElement;
+      const r = page ? { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight } : s.getBoundingClientRect();
+      const v = i === 0 ? edgeSpeed(d.x, r.left, r.right) : edgeSpeed(d.y, r.top, r.bottom);
+      if (!v) return;
+      const before = i === 0 ? s.scrollLeft : s.scrollTop;
+      if (i === 0) s.scrollLeft += v;
+      else s.scrollTop += v;
+      scrolled ||= (i === 0 ? s.scrollLeft : s.scrollTop) !== before;
+    });
+    if (scrolled) update(d);
+    d.raf = requestAnimationFrame(tick);
+  };
+  const finish = (commit) => {
+    const d = drag.current;
+    if (!d) return;
+    drag.current = null;
+    window.removeEventListener("keydown", d.onKey, true);
+    if (!d.active) return;
+    cancelAnimationFrame(d.raf);
+    flipFrom.current = snapshot();
+    if (d.el) d.el.style.translate = "";
+    if (commit && d.target) move(d.from, d.target, false);
+    setDragging(null);
+    setMark(null);
+  };
+  React.useEffect(() => () => finish(false), []);
+  const begin = (d) => {
+    d.active = true;
+    d.el = itemOf(d.handle) ?? d.handle;
+    d.rect0 = d.el.getBoundingClientRect();
+    d.scrollers = [scrollParent(d.el, "x"), scrollParent(d.el, "y")];
+    setDragging(d.id);
+    d.raf = requestAnimationFrame(tick);
+  };
+  const itemProps = (pos) => {
+    const id = getId(lists[pos[0]][pos[1]]);
+    const lifted = dragging === id ? "" : void 0;
+    const drop = mark && "id" in mark && mark.id === id ? mark.edge : void 0;
+    const prev = itemCache.current.get(id);
+    if (prev && prev["data-nx-dragging"] === lifted && prev["data-nx-drop"] === drop) return prev;
+    const next = { "data-nx-reorder-item": "", "data-nx-dragging": lifted, "data-nx-drop": drop };
+    itemCache.current.set(id, next);
+    return next;
+  };
   const listProps = (list) => ({
-    onDragOver: (e) => {
-      if (dragged.current) e.preventDefault();
+    ref: (el) => {
+      if (el) listEls.current.set(list, el);
+      else listEls.current.delete(list);
     },
-    onDrop: (e) => {
-      e.preventDefault();
-      if (dragged.current) move(dragged.current, [list, lists[list].length], false);
-      dragged.current = null;
-    }
+    "data-nx-drop": mark && "list" in mark && mark.list === list ? "inside" : void 0
   });
   const handle = (pos, className) => {
     const item = lists[pos[0]][pos[1]];
@@ -78,6 +191,51 @@ function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
         },
         "aria-label": t.moveItem(getLabel(item)),
         "aria-describedby": hintId,
+        onPointerDown: (e) => {
+          if (e.button !== 0 || drag.current) return;
+          const { clientX: x, clientY: y } = e;
+          const d = {
+            from: pos,
+            id,
+            handle: e.currentTarget,
+            x0: x,
+            y0: y,
+            x,
+            y,
+            active: false,
+            tx: 0,
+            ty: 0,
+            target: null,
+            mark: null,
+            scrollers: [null, null],
+            raf: 0,
+            onKey: (k) => {
+              if (k.key !== "Escape") return;
+              k.preventDefault();
+              k.stopPropagation();
+              finish(false);
+            }
+          };
+          drag.current = d;
+          window.addEventListener("keydown", d.onKey, true);
+          try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+          } catch {
+          }
+        },
+        onPointerMove: (e) => {
+          const d = drag.current;
+          if (!d || d.id !== id) return;
+          d.x = e.clientX;
+          d.y = e.clientY;
+          if (!d.active) {
+            if (Math.hypot(d.x - d.x0, d.y - d.y0) < THRESHOLD) return;
+            begin(d);
+          }
+          update(d);
+        },
+        onPointerUp: () => finish(true),
+        onPointerCancel: () => finish(false),
         onKeyDown: (e) => {
           if (!e.altKey) return;
           const [c, i] = pos;
@@ -94,7 +252,7 @@ function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
           move(pos, to, true);
         },
         className: cn(
-          "inline-flex size-7 shrink-0 cursor-grab items-center justify-center rounded-shape-min text-[var(--color-on-surface-variant)]",
+          "inline-flex size-7 shrink-0 cursor-grab touch-none select-none items-center justify-center rounded-shape-min text-[var(--color-on-surface-variant)]",
           "hover:bg-[var(--color-surface-container-high)] active:cursor-grabbing",
           className
         ),

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

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import * as RadixTabs from '@radix-ui/react-tabs';
+export interface TabsListProps extends RadixTabs.TabsListProps {
+    /** `line` (default): underline. `pill`: a raised thumb slides behind the active tab. */
+    variant?: 'line' | 'pill';
+}
 export declare const Tabs: {
     Root: React.ForwardRefExoticComponent<RadixTabs.TabsProps & React.RefAttributes<HTMLDivElement>>;
-    List: React.ForwardRefExoticComponent<RadixTabs.TabsListProps & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<RadixTabs.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<RadixTabs.TabsContentProps & React.RefAttributes<HTMLDivElement>>;
 };