@wisdomgarden/torque 0.1.2 → 0.2.1

package/dist/components/popover/popover.js

@@ -1,175 +1,194 @@
 "use client";
-import { jsx as ne } from "react/jsx-runtime";
-import { offset as oe, flip as se, size as re, shift as le, limitShift as ce, arrow as ae, hide as ie, useFloating as de, autoUpdate as ue } from "@floating-ui/react-dom";
-import { useDirection as fe, getFloatingPosition as pe } from "@mantine/core";
-import _, { useRef as l, useId as me, useCallback as c, useEffect as ge, useMemo as q } from "react";
-import { useEscapeClose as ve } from "./hooks.js";
-import { PopoverContext as A } from "./popover-context.js";
-const g = 8, ye = ({
-  children: B,
-  position: H = "bottom",
-  offset: y = 8,
-  opened: C,
-  defaultOpened: J = !1,
-  onOpenChange: N,
+import { jsx as ie } from "react/jsx-runtime";
+import { offset as le, flip as ae, size as de, shift as ue, limitShift as fe, arrow as me, hide as pe, useFloating as ge, autoUpdate as ve } from "@floating-ui/react-dom";
+import { useDirection as he, getFloatingPosition as Ee } from "@mantine/core";
+import B, { useRef as l, useId as xe, useCallback as r, useEffect as J, useMemo as K } from "react";
+import { useEscapeClose as Re } from "./hooks.js";
+import { PopoverContext as Q } from "./popover-context.js";
+const v = 8, Te = ({
+  children: W,
+  position: X = "bottom",
+  offset: C = 8,
+  opened: N,
+  defaultOpened: Y = !1,
+  onOpenChange: T,
   disabled: b = !1,
-  withArrow: r = !1,
+  withArrow: i = !1,
   arrowSize: a = 8,
-  trigger: D = "click",
-  closeOnClickOutside: I = !0,
-  closeOnEscape: K = !0,
-  restoreFocus: Q,
-  strategy: v = "absolute",
-  initialFocusRef: L,
-  trapFocus: M = !1,
-  preventAutoFocus: S = !1,
-  "aria-labelledby": $
+  trigger: I = "click",
+  openDelay: L = 0,
+  closeDelay: M = 100,
+  closeOnClickOutside: S = !0,
+  closeOnEscape: Z = !0,
+  restoreFocus: z,
+  strategy: h = "absolute",
+  initialFocusRef: $,
+  trapFocus: D = !1,
+  preventAutoFocus: G = !1,
+  "aria-labelledby": H
 }) => {
-  const h = _.useContext(A), G = h?.registerNestedFloatingElement, x = h ? h.depth + 1 : 0, E = C !== void 0, [W, X] = _.useState(J), t = E ? C : W, i = l(null), d = l(null), u = l(null), R = l(/* @__PURE__ */ new Set()), T = l(0), F = me(), { dir: Y } = fe(), o = c(
+  const E = B.useContext(Q), j = E?.registerNestedFloatingElement, x = E ? E.depth + 1 : 0, R = N !== void 0, [ee, te] = B.useState(Y), o = R ? N : ee, d = l(null), u = l(null), f = l(null), F = l(/* @__PURE__ */ new Set()), P = l(void 0), y = xe(), { dir: ne } = he(), n = r(
     (e) => {
-      E || X(e), N?.(e);
+      R || te(e), T?.(e);
     },
-    [E, N]
-  ), P = c(() => o(!1), [o]), j = c(() => o(!t), [t, o]), k = c(
+    [R, T]
+  ), w = r(() => n(!1), [n]), k = r(() => n(!o), [o, n]), s = r(() => {
+    window.clearTimeout(P.current), P.current = void 0;
+  }, []), O = r(
     (e) => {
-      R.current.add(e);
-      const n = G?.(e);
+      s();
+      const t = e ? L : M;
+      if (t <= 0) {
+        n(e);
+        return;
+      }
+      P.current = window.setTimeout(() => n(e), t);
+    },
+    [s, L, M, n]
+  );
+  J(() => s, [s]);
+  const U = r(
+    (e) => {
+      F.current.add(e);
+      const t = j?.(e);
       return () => {
-        R.current.delete(e), n?.();
+        F.current.delete(e), t?.();
       };
     },
-    [G]
-  ), f = c(() => {
-    const e = u.current ? [u.current] : [];
-    return R.current.forEach((n) => {
-      n.isConnected && e.push(n);
+    [j]
+  ), m = r(() => {
+    const e = f.current ? [f.current] : [];
+    return F.current.forEach((t) => {
+      t.isConnected && e.push(t);
     }), Array.from(new Set(e));
   }, []);
-  ge(() => {
-    if (!I || !t) return;
-    const e = (n) => {
-      const m = n.composedPath(), s = d.current;
-      s && m.includes(s) || f().some((te) => m.includes(te)) || P();
+  J(() => {
+    if (!S || !o) return;
+    const e = (t) => {
+      const g = t.composedPath(), c = u.current;
+      c && g.includes(c) || m().some((ce) => g.includes(ce)) || w();
     };
     return document.addEventListener("mousedown", e, !0), document.addEventListener("touchstart", e, !0), () => {
       document.removeEventListener("mousedown", e, !0), document.removeEventListener("touchstart", e, !0);
     };
-  }, [I, t, P, f]), ve(
-    K,
-    t,
-    P,
-    d,
-    F,
+  }, [S, o, w, m]), Re(
+    Z,
+    o,
+    w,
+    u,
+    y,
     x,
-    Q
+    z
   );
-  const Z = q(
+  const oe = K(
     () => [
-      oe(y + (r ? a / 2 : 0)),
-      se({ padding: g }),
+      le(C + (i ? a / 2 : 0)),
+      ae({ padding: v }),
       // 必须在 shift 之前：否则 availableHeight 是 shift 推动后的位置算出的（≈整屏），高度约束失效
-      re({
-        padding: g,
-        apply({ availableWidth: e, availableHeight: n, rects: m, elements: s }) {
-          s.floating.style.setProperty(
+      de({
+        padding: v,
+        apply({ availableWidth: e, availableHeight: t, rects: g, elements: c }) {
+          c.floating.style.setProperty(
             "--t-popover-available-width",
             `${Math.max(0, e)}px`
-          ), s.floating.style.setProperty(
+          ), c.floating.style.setProperty(
             "--t-popover-available-height",
-            `${Math.max(0, n)}px`
-          ), s.floating.style.setProperty(
+            `${Math.max(0, t)}px`
+          ), c.floating.style.setProperty(
             "--t-popover-reference-width",
-            `${m.reference.width}px`
+            `${g.reference.width}px`
           );
         }
       }),
-      le({
-        padding: g,
+      ue({
+        padding: v,
         crossAxis: !0,
         mainAxis: !0,
-        limiter: ce()
+        limiter: fe()
       }),
-      ...r ? (
+      ...i ? (
         // floating-ui 的 arrow 中间件按设计就是收一个 ref 对象（它在定位阶段自己读
         // .current），不是我们在渲染期读 ref 的值。没有保留该 API 的改写方式。
         // eslint-disable-next-line react-hooks/refs
-        [ae({ element: i, padding: g })]
+        [me({ element: d, padding: v })]
       ) : [],
-      ie()
+      pe()
     ],
-    [y, r, a, i]
+    [C, i, a, d]
   ), {
-    x: w,
-    y: O,
+    x: V,
+    y: _,
     refs: p,
-    placement: z,
-    middlewareData: U
-  } = de({
-    open: t,
-    strategy: v,
-    placement: pe(Y, H),
-    middleware: Z,
-    whileElementsMounted: ue
-  }), V = z.split("-")[0], ee = q(
+    placement: re,
+    middlewareData: q
+  } = ge({
+    open: o,
+    strategy: h,
+    placement: Ee(ne, X),
+    middleware: oe,
+    whileElementsMounted: ve
+  }), A = re.split("-")[0], se = K(
     () => ({
-      opened: t,
-      setOpen: o,
-      toggle: j,
-      trigger: D,
+      opened: o,
+      setOpen: n,
+      toggle: k,
+      trigger: I,
       disabled: b,
-      id: F,
-      withArrow: r,
+      id: y,
+      withArrow: i,
       arrowSize: a,
-      x: w,
-      y: O,
-      strategy: v,
-      resolvedSide: V,
-      middlewareData: U,
-      hoverTimerRef: T,
-      referenceRef: d,
-      floatingRef: u,
-      arrowRef: i,
+      x: V,
+      y: _,
+      strategy: h,
+      resolvedSide: A,
+      middlewareData: q,
+      scheduleHover: O,
+      cancelHoverTimer: s,
+      referenceRef: u,
+      floatingRef: f,
+      arrowRef: d,
       setReference: p.setReference,
       setFloating: p.setFloating,
       depth: x,
-      registerNestedFloatingElement: k,
-      getFloatingScopeElements: f,
-      initialFocusRef: L,
-      trapFocus: M,
-      preventAutoFocus: S,
-      ariaLabelledby: $
+      registerNestedFloatingElement: U,
+      getFloatingScopeElements: m,
+      initialFocusRef: $,
+      trapFocus: D,
+      preventAutoFocus: G,
+      ariaLabelledby: H
     }),
     [
-      t,
       o,
-      j,
-      D,
+      n,
+      k,
+      I,
       b,
-      F,
-      r,
+      y,
+      i,
       a,
-      w,
-      O,
-      v,
       V,
-      U,
-      T,
-      d,
+      _,
+      h,
+      A,
+      q,
+      O,
+      s,
       u,
-      i,
+      f,
+      d,
       p.setReference,
       p.setFloating,
       x,
-      k,
-      f,
-      L,
-      M,
-      S,
-      $
+      U,
+      m,
+      $,
+      D,
+      G,
+      H
     ]
   );
-  return /* @__PURE__ */ ne(A.Provider, { value: ee, children: B });
+  return /* @__PURE__ */ ie(Q.Provider, { value: se, children: W });
 };
 export {
-  ye as Popover
+  Te as Popover
 };

package/dist/components/popover/popover.types.d.ts

@@ -55,6 +55,18 @@ export interface PopoverProps {
      * @default 'click'
      */
     trigger?: PopoverTrigger;
+    /**
+     * hover 打开延迟（ms），0 表示立即打开。
+     * 仅 `trigger="hover"` 的鼠标移入生效；键盘聚焦始终立即打开。
+     * @default 0
+     */
+    openDelay?: number;
+    /**
+     * hover 关闭延迟（ms），留出鼠标从触发元素移动到浮层的时间。
+     * 仅 `trigger="hover"` 生效。
+     * @default 100
+     */
+    closeDelay?: number;
     /**
      * 点击外部区域时关闭
      * @default true
@@ -188,7 +200,10 @@ export interface PopoverContextValue {
             escaped?: boolean;
         };
     };
-    hoverTimerRef: React.MutableRefObject<number | undefined>;
+    /** hover 触发的延迟开关调度：同一时刻只保留一个待执行任务，延迟为 0 时同步执行 */
+    scheduleHover: (next: boolean) => void;
+    /** 取消尚未执行的 hover 开关任务 */
+    cancelHoverTimer: () => void;
     referenceRef: React.RefObject<HTMLElement | null>;
     floatingRef: React.RefObject<HTMLDivElement | null>;
     arrowRef: React.RefObject<HTMLDivElement | null>;

package/dist/components/tab/index.d.ts

@@ -4,4 +4,4 @@ export { TabsPanel } from './subs/tabs-panel';
 export { TabsList } from './subs/tabs-list';
 export { TabsLinkTab } from './subs/tabs-link-tab';
 export type { TabsLinkTabProps } from './subs/tabs-link-tab';
-export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabsVariant, TabsLayout, TabValue, } from './tabs.types';
+export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabsVariant, TabsLayout, TabsBgType, TabsOverflow, TabValue, } from './tabs.types';

package/dist/components/tab/styles/tabs-variables.module.css.js

@@ -1,5 +1,5 @@
 "use client";
-const a = "_tabVars_1cam0_2", s = {
+const a = "_tabVars_15764_2", s = {
   tabVars: a
 };
 export {

package/dist/components/tab/styles/tabs.module.css.js

@@ -1,10 +1,10 @@
 "use client";
-const t = "_tabs_1y0n6_2", n = "_tabList_1y0n6_5", a = "_tab_1y0n6_2", o = "_tabTruncate_1y0n6_70", s = "_tabContent_1y0n6_78", _ = "_tabPanel_1y0n6_93", e = "_scrollAreaRoot_1y0n6_96", c = "_scrollAreaContent_1y0n6_100", b = {
+const t = "_tabs_1kvas_2", a = "_tabList_1kvas_5", s = "_tab_1kvas_2", n = "_tabTruncate_1kvas_76", o = "_tabContent_1kvas_84", _ = "_tabPanel_1kvas_99", e = "_scrollAreaRoot_1kvas_102", c = "_scrollAreaContent_1kvas_106", b = {
   tabs: t,
-  tabList: n,
-  tab: a,
-  tabTruncate: o,
-  tabContent: s,
+  tabList: a,
+  tab: s,
+  tabTruncate: n,
+  tabContent: o,
   tabPanel: _,
   scrollAreaRoot: e,
   scrollAreaContent: c
@@ -13,10 +13,10 @@ export {
   b as default,
   c as scrollAreaContent,
   e as scrollAreaRoot,
-  a as tab,
-  s as tabContent,
-  n as tabList,
+  s as tab,
+  o as tabContent,
+  a as tabList,
   _ as tabPanel,
-  o as tabTruncate,
+  n as tabTruncate,
   t as tabs
 };

package/dist/components/tab/tabs.types.d.ts

@@ -3,29 +3,9 @@ import { TabSize } from '../../common/components.types';
 export type TabValue = string | null;
 export type TabsVariant = 'outline' | 'filled' | 'underline';
 export type TabsLayout = 'separated' | 'contained';
+export type TabsBgType = 'gray' | 'white';
+export type TabsOverflow = 'scroll' | 'truncate' | 'wrap';
 export interface BaseTabsProps {
-    /**
-     * TabsTab 选中时的高亮风格
-     * - 'outline': 胶囊形状选中时带主题色边框和浅色背景
-     * - 'filled': 胶囊形状选中时为纯主题色实底白字
-     * - 'underline': 选中时为文字加底部短下划线
-     * @default 'underline'
-     */
-    variant?: TabsVariant;
-    /**
-     * Tabs 列表的外层容器包裹形式 (决定了 TabsList 和 TabsTab 之间的间距和底色关系)
-     * - 'separated': 散列式。每个 TabsTab 是独立的胶囊，之间有 gap。
-     * - 'contained': 包含式。所有 TabsTab 紧凑地挤在一个带圆角和 padding 的长条背景框内。(替代之前的 segmented)
-     * @default 'separated'
-     */
-    layout?: TabsLayout;
-    /**
-     * 胶囊形状未选中状态或容器的背景色，适配灰色和白色外部背景
-     * - 'gray': 偏灰色的底色
-     * - 'white': 纯白色的底色
-     * @default 'white'
-     */
-    bgType?: 'gray' | 'white';
     /**
      * 尺寸大小
      * @default 'md'
@@ -38,7 +18,7 @@ export interface BaseTabsProps {
      *  'wrap' 单行放不下时换行，行间距同 TabsList 的 gap，
      * @default 'scroll'
      */
-    overflow?: 'scroll' | 'truncate' | 'wrap';
+    overflow?: TabsOverflow;
     /**
      * 是否在未选中时保持挂载到 DOM 中
      * @default false
@@ -57,12 +37,47 @@ export interface BaseTabsProps {
      */
     color?: 'brand' | 'air';
 }
+interface UnderlineTabsAppearanceProps {
+    /**
+     * 文字加底部短下划线的高亮风格。
+     * @default 'underline'
+     */
+    variant?: 'underline';
+    layout?: never;
+    bgType?: never;
+}
+interface PillTabsAppearanceProps {
+    /**
+     * 胶囊形状的高亮风格。
+     * - 'outline': 选中时带主题色边框和浅色背景
+     * - 'filled': 选中时为纯主题色实底白字
+     */
+    variant: Exclude<TabsVariant, 'underline'>;
+    /**
+     * Tabs 列表的外层容器包裹形式 (决定了 TabsList 和 TabsTab 之间的间距和底色关系)
+     * - 'separated': 散列式。每个 TabsTab 是独立的胶囊，之间有 gap。
+     * - 'contained': 包含式。所有 TabsTab 紧凑地挤在一个带圆角和 padding 的长条背景框内。(替代之前的 segmented)
+     * @default 'separated'
+     */
+    layout?: TabsLayout;
+    /**
+     * 胶囊形状未选中状态或容器的背景色，适配灰色和白色外部背景
+     * - 'gray': 偏灰色的底色
+     * - 'white': 纯白色的底色
+     * @default 'white'
+     */
+    bgType?: TabsBgType;
+}
 export interface TabsContextValue extends BaseTabsProps {
+    variant: TabsVariant;
+    layout: TabsLayout;
+    bgType: TabsBgType;
     value: TabValue;
     onChange: (value: TabValue) => void;
     idPrefix: string;
 }
-export interface TabsProps extends Omit<React.ComponentProps<'div'>, 'onChange' | 'value' | 'defaultValue' | 'color'>, BaseTabsProps {
+type TabsRootProps = Omit<React.ComponentProps<'div'>, 'onChange' | 'value' | 'defaultValue' | 'color'>;
+export type TabsProps = TabsRootProps & BaseTabsProps & (UnderlineTabsAppearanceProps | PillTabsAppearanceProps) & {
     /**
      * 选中的 tab 值 (受控)
      */
@@ -76,7 +91,7 @@ export interface TabsProps extends Omit<React.ComponentProps<'div'>, 'onChange'
      */
     onChange?: (value: TabValue) => void;
     children: ReactNode;
-}
+};
 export interface TabListProps extends React.ComponentProps<'div'> {
     /**
      * TabList 滚动模式下跟元素的样式
@@ -105,3 +120,4 @@ export interface TabProps extends Omit<React.ComponentProps<'button'>, 'value'>
 export interface TabPanelProps extends React.ComponentProps<'div'> {
     value: TabValue;
 }
+export {};

package/dist/components/tab/use-tabs-data-props.d.ts

@@ -1,9 +1,9 @@
-import { BaseTabsProps } from './tabs.types';
-export declare const useTabsDataProps: (props: BaseTabsProps) => {
-    'data-variant': import("./tabs.types").TabsVariant | undefined;
+import { TabsContextValue } from './tabs.types';
+export declare const useTabsDataProps: (props: TabsContextValue) => {
+    'data-variant': import("./tabs.types").TabsVariant;
     'data-size': import("../..").SimpleComponentSizeBase | undefined;
-    'data-layout': import("./tabs.types").TabsLayout | undefined;
-    'data-bg-type': "white" | "gray" | undefined;
-    'data-overflow': "scroll" | "truncate" | "wrap" | undefined;
+    'data-layout': import("./tabs.types").TabsLayout;
+    'data-bg-type': import("./tabs.types").TabsBgType;
+    'data-overflow': import("./tabs.types").TabsOverflow | undefined;
     'data-color': "brand" | "air" | undefined;
 };