@wisdomgarden/torque 0.1.0

package/dist/components/tree/tree-node-list.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface TreeNodeListProps {
+    readonly onKeyDownCapture?: React.KeyboardEventHandler;
+}
+/**
+ * 遍历 tree.getItems()，渲染全部可见节点
+ */
+export declare function TreeNodeList<T>({ onKeyDownCapture }: TreeNodeListProps): React.JSX.Element;
+export {};

package/dist/components/tree/tree-node-list.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
+import i from "./styles/tree.module.css.js";
+import { useTreeContext as n } from "./tree-context.js";
+import { TreeNode as c } from "./tree-node.js";
+function u({ onKeyDownCapture: o }) {
+  const { tree: e, classNames: s } = n();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...e.getContainerProps(),
+      onKeyDownCapture: o,
+      className: m(i.tree, s?.tree),
+      children: e.getItems().map((r) => /* @__PURE__ */ t(c, { item: r }, r.getId()))
+    }
+  );
+}
+export {
+  u as TreeNodeList
+};

package/dist/components/tree/tree-node.d.ts

@@ -0,0 +1,11 @@
+import { ItemInstance } from '@headless-tree/core';
+import React from 'react';
+interface TreeNodeProps<T> {
+    readonly item: ItemInstance<T>;
+}
+/**
+ * 单个树节点默认渲染
+ *
+ */
+export declare function TreeNode<T>({ item }: TreeNodeProps<T>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export {};

package/dist/components/tree/tree-node.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { CheckedState as S } from "@headless-tree/core";
+import { Icon as T } from "@wisdomgarden/torque-icons";
+import { clsx as a } from "clsx";
+import "../../provider/ui-context.js";
+import "react";
+import { useLocale as M } from "../../provider/hooks.js";
+import { Checkbox as B } from "../checkbox/checkbox.js";
+import { IconButton as W } from "../icon-button/icon-button.js";
+import { ANIMATION_COLLAPSE_DURATION as z } from "./hooks/use-tree-animation.js";
+import n from "./styles/tree.module.css.js";
+import { useTreeContext as F } from "./tree-context.js";
+const H = 8, y = 27, $ = 22, j = 16, G = 4;
+function ne({ item: e }) {
+  const I = M(), {
+    selectionMode: l,
+    classNames: s,
+    renderNode: r,
+    getItemIcon: k,
+    isItemDisabled: D,
+    animatingNodes: C
+  } = F(), p = e.getItemMeta().level, N = e.isFolder(), i = e.isExpanded(), u = e.isFocused(), L = e.isMatchingSearch(), x = e.getItemName(), b = e.getId(), c = e.getItemData(), m = c != null ? k?.(c) : void 0, t = c != null && !!D?.(c), g = e.isSelected(), f = e.getCheckedState() === S.Checked, A = (h) => {
+    h.stopPropagation(), i ? e.collapse() : e.expand();
+  }, P = C.get(b) === "expanding", _ = C.get(b) === "collapsing", O = $ + (l === "multi" ? j + G : 0), E = {
+    "--tree-node-indent": `${p * y + H}px`,
+    "--tree-node-leading-inline-size": `${O}px`
+  };
+  let d;
+  if (r)
+    d = r(e, {
+      itemProps: e.getProps(),
+      level: p,
+      isExpanded: i,
+      isFolder: N,
+      isSelected: g,
+      isFocused: u,
+      isDisabled: t,
+      label: x
+    });
+  else {
+    const h = e.getProps();
+    d = /* @__PURE__ */ v(
+      "div",
+      {
+        className: a(n.node, n.nodeWidth, s?.node),
+        style: E,
+        children: [
+          N ? /* @__PURE__ */ o(
+            W,
+            {
+              iconName: "arrow-right-fill",
+              iconClassName: a(
+                n.chevronIcon,
+                i && n.chevronIconExpanded,
+                s?.nodeChevron
+              ),
+              variant: "text",
+              color: "regular",
+              size: "md",
+              onClick: A,
+              disabled: t,
+              tabIndex: -1,
+              "aria-label": i ? I.collapse : I.expand
+            }
+          ) : /* @__PURE__ */ o("span", { className: n.spacer, "aria-hidden": "true" }),
+          l === "multi" && /* @__PURE__ */ o(
+            B,
+            {
+              ...e.getCheckboxProps(),
+              indeterminate: e.getCheckedState() === S.Indeterminate,
+              className: s?.nodeCheck
+            }
+          ),
+          /* @__PURE__ */ v(
+            "button",
+            {
+              ...h,
+              "data-selected": g,
+              "data-focused": u,
+              "data-checked": f,
+              "data-disabled": t,
+              "data-mode": l,
+              className: a(n.nodeContent, s?.nodeContent),
+              children: [
+                m && /* @__PURE__ */ o(
+                  T,
+                  {
+                    name: m.iconName,
+                    useOriginalColor: m.useOriginalColor,
+                    className: a(
+                      n.nodeIcon,
+                      t && n.nodeIconDisabled,
+                      s?.nodeIcon
+                    )
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "span",
+                  {
+                    className: a(
+                      n.nodeLabel,
+                      t && n.nodeLabelDisabled,
+                      !t && (f || g) && n.nodeLabelActive,
+                      s?.nodeLabel,
+                      L && n.nodeLabelMatching
+                    ),
+                    children: x
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return p > 0 ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: a(
+        n.nodeAnimationWrapper,
+        !r && n.nodeWidth,
+        P && n.isExpanding,
+        _ && n.isCollapsing
+      ),
+      style: {
+        "--animation-duration": `${z}ms`,
+        ...E
+      },
+      children: /* @__PURE__ */ o("div", { className: n.nodeAnimationInner, children: d })
+    }
+  ) : d;
+}
+export {
+  ne as TreeNode
+};

package/dist/components/tree/tree.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TreeProps } from './tree.types';
+/**
+ * 平铺树组件
+ *
+ * @example
+ * ```tsx
+ * <Tree
+ *   data={[{ data: { id: '1', name: '技术类' }, children: [...] }]}
+ *   getItemId={item => item.id}
+ *   getItemName={item => item.name}
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ * ```
+ */
+export declare function Tree<T = unknown>(props: Readonly<TreeProps<T>>): React.JSX.Element;
+export declare namespace Tree {
+    var displayName: string;
+}

package/dist/components/tree/tree.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as a } from "clsx";
+import { useTree as c } from "./hooks/use-tree.js";
+import l from "./styles/tree.module.css.js";
+import { TreeContent as m } from "./tree-content.js";
+import { TreeContextProvider as i } from "./tree-context.js";
+function n(e) {
+  const o = c(e), { classNames: t } = o, { searchable: s = !0 } = e;
+  return /* @__PURE__ */ r(i, { value: o, children: /* @__PURE__ */ r("div", { className: a(l.root, e.className, t?.root), children: /* @__PURE__ */ r(
+    m,
+    {
+      searchable: s,
+      autoFocusSearch: !1,
+      searchPlaceholder: e.searchPlaceholder
+    }
+  ) }) });
+}
+n.displayName = "Tree";
+export {
+  n as Tree
+};

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

@@ -0,0 +1,126 @@
+import { ItemInstance } from '@headless-tree/core';
+import { RootClassNameProps } from '../../common/components.types';
+import type { IconName } from '@wisdomgarden/torque-icons';
+/**
+ * 树节点数据包装器，支持任意业务数据类型 T
+ */
+export interface TreeDataNode<T = unknown> {
+    /** 业务数据 */
+    data: T;
+    /** 子节点 */
+    children?: TreeDataNode<T>[];
+}
+export interface TreeItemIcon {
+    iconName: IconName;
+    useOriginalColor?: boolean;
+}
+export interface TreeHandle {
+    scrollToItem: (id: string, options?: boolean | ScrollIntoViewOptions) => void;
+}
+/**
+ * 传给 renderNode 的默认 Props，外部完全自定义节点时使用
+ */
+export interface TreeNodeDefaultProps {
+    /** 必须展开到节点根元素，保证 a11y（aria、键盘事件等） */
+    itemProps: Record<string, unknown>;
+    level: number;
+    isExpanded: boolean;
+    isFolder: boolean;
+    isSelected: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    label: string;
+}
+/**
+ * classNames 覆盖各语义 DOM 分区
+ */
+export interface TreeClassNames {
+    root?: string;
+    tree?: string;
+    node?: string;
+    nodeChevron?: string;
+    nodeContent?: string;
+    nodeIcon?: string;
+    nodeLabel?: string;
+    nodeCheck?: string;
+}
+export type SingleModeProps = {
+    /** @default 'single' */
+    selectionMode?: 'single';
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+};
+export type MultiModeProps = {
+    selectionMode: 'multi';
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+};
+/**
+ * 不能都为false
+ */
+type TreeSelectionBehaviorProps = {
+    /** 文件夹节点是否可选中，默认 true */
+    selectableFolders?: boolean;
+    /** 多选时父子节点的勾选状态是否级联，默认 true */
+    propagateCheckedState?: true;
+} | {
+    /** 文件夹节点是否可选中，默认 true */
+    selectableFolders?: true;
+    /** 多选时父子节点的勾选状态是否级联，默认 true；false 时各节点独立勾选 */
+    propagateCheckedState?: boolean;
+};
+/**
+ * 树形组件的基础 Props
+ */
+export type TreeBaseProps<T = unknown> = (SingleModeProps | MultiModeProps) & TreeSelectionBehaviorProps & RootClassNameProps & {
+    /** 树形数据（根节点列表） */
+    data: TreeDataNode<T>[];
+    /** 从业务数据提取唯一 ID */
+    getItemId: (item: T) => string;
+    /** 从业务数据提取显示文本 */
+    getItemName: (item: T) => string;
+    /** 判断是否为文件夹节点（影响展开箭头和点击行为） */
+    isItemFolder?: (item: T) => boolean;
+    /** 获取节点图标配置 */
+    getItemIcon?: (item: T) => TreeItemIcon | undefined;
+    /** 判断节点是否禁用 */
+    isItemDisabled?: (item: T) => boolean;
+    /**
+     * 点击节点文字区域是否选择节点。
+     * 默认单选为 true，多选为 false；多选启用后会切换复选状态。
+     */
+    selectOnLabelClick?: boolean;
+    /**
+     * 单选模式下，点击可选文件夹是否同时展开该文件夹。
+     * 默认 true（沿用 @headless-tree 默认点击行为）。设为 false 时点击只选中，
+     * 展开留给节点前的箭头控制。
+     * @default true
+     */
+    expandFolderOnSelect?: boolean;
+    /** 展开的节点 ID 列表（受控） */
+    expandedIds?: string[];
+    /** 展开节点变化时的回调 */
+    onExpandedIdsChange?: (ids: string[]) => void;
+    /** 搜索关键字（受控） */
+    searchValue?: string;
+    /** 搜索关键字变化时的回调 */
+    onSearchValueChange?: (value: string) => void;
+    /** 初始默认展开的节点 ID 列表（仅作用于首次挂载，不触发展开动画） */
+    defaultExpandedIds?: string[];
+    /** 命令式句柄，当前用于滚动定位等场景 */
+    apiRef?: React.Ref<TreeHandle>;
+    /**
+     * 懒加载模式：子节点数据在展开后才由外部生成（配合 expandedIds 受控使用）。
+     * 该模式下跳过展开/收起动画（子节点挂载前无法打动画标记），后续可承载 loading 等状态。
+     */
+    lazyMode?: boolean;
+    classNames?: TreeClassNames;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** 完全自定义节点，itemProps 必须展开到根元素以保证 a11y */
+    renderNode?: (item: ItemInstance<T>, defaultProps: TreeNodeDefaultProps) => React.ReactNode;
+};
+export type TreeProps<T = unknown> = TreeBaseProps<T>;
+export {};

package/dist/components/tree-select/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeSelect } from './tree-select';
+export type * from './tree-select.types';

package/dist/components/tree-select/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { TreeSelect as t } from "./tree-select.js";
+export {
+  t as TreeSelect
+};

package/dist/components/tree-select/styles/tree-select.module.css.js

@@ -0,0 +1,20 @@
+"use client";
+const e = "_dropdown_1tedb_2", t = "_selectAllRow_1tedb_16", l = "_spacer_1tedb_24", c = "_selectAllLabel_1tedb_30", n = "_pillInputField_1tedb_35", o = "_targetIcon_1tedb_43", _ = "_targetIconOpen_1tedb_47", s = {
+  dropdown: e,
+  selectAllRow: t,
+  spacer: l,
+  selectAllLabel: c,
+  pillInputField: n,
+  targetIcon: o,
+  targetIconOpen: _
+};
+export {
+  s as default,
+  e as dropdown,
+  n as pillInputField,
+  c as selectAllLabel,
+  t as selectAllRow,
+  l as spacer,
+  o as targetIcon,
+  _ as targetIconOpen
+};

package/dist/components/tree-select/tree-select-dropdown.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { TreeSelectProps } from './tree-select.types';
+export type TreeSelectDropdownProps<T> = Pick<TreeSelectProps<T>, 'classNames' | 'searchable' | 'searchPlaceholder' | 'withinPortal' | 'dropdownMaxHeight'> & {
+    topSlot?: React.ReactNode;
+};
+/**
+ * TreeSelect 下拉面板，基于 PopoverDropdown 实现
+ */
+export declare function TreeSelectDropdown<T>({ classNames, searchable, searchPlaceholder, withinPortal, dropdownMaxHeight, topSlot, }: Readonly<TreeSelectDropdownProps<T>>): React.JSX.Element;

package/dist/components/tree-select/tree-select-dropdown.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as c } from "clsx";
+import { Popover as i } from "../popover/index.js";
+import { TreeContent as d } from "../tree/tree-content.js";
+import a from "./styles/tree-select.module.css.js";
+function w({
+  classNames: o,
+  searchable: e,
+  searchPlaceholder: t,
+  withinPortal: m,
+  dropdownMaxHeight: n,
+  topSlot: p
+}) {
+  return /* @__PURE__ */ r(
+    i.Dropdown,
+    {
+      className: c(a.dropdown, o?.dropdown),
+      matchTargetWidth: !0,
+      withinPortal: m,
+      maxHeight: n,
+      children: /* @__PURE__ */ r(
+        d,
+        {
+          searchable: e,
+          autoFocusSearch: !0,
+          searchPlaceholder: t,
+          topSlot: p
+        }
+      )
+    }
+  );
+}
+export {
+  w as TreeSelectDropdown
+};

package/dist/components/tree-select/tree-select-target.d.ts

@@ -0,0 +1,18 @@
+import { TreeInstance } from '@headless-tree/core';
+import React from 'react';
+import type { TreeSelectProps } from './tree-select.types';
+interface TreeSelectTargetProps<T> extends Pick<TreeSelectProps<T>, 'size' | 'placeholder' | 'disabled' | 'clearable' | 'error' | 'singleLine' | 'borderRadius' | 'id' | 'selectionMode' | 'classNames' | 'getItemName' | 'aria-label'> {
+    readonly ref?: React.Ref<HTMLDivElement>;
+    readonly selectedIds: string[];
+    readonly tree: TreeInstance<T>;
+    readonly onRemove?: (id: string) => void;
+    readonly onClick?: () => void;
+    readonly onClear?: () => void;
+    readonly dropdownOpened?: boolean;
+    readonly 'aria-describedby'?: string;
+}
+/**
+ * TreeSelect 触发器
+ */
+export declare function TreeSelectTarget<T>({ ref, size, placeholder, disabled, clearable, error, singleLine, borderRadius, id, selectionMode, selectedIds, tree, getItemName, onRemove, onClick, onClear, dropdownOpened, classNames, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, }: TreeSelectTargetProps<T>): React.JSX.Element;
+export {};

package/dist/components/tree-select/tree-select-target.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { PillsInput as E } from "@mantine/core";
+import { clsx as i } from "clsx";
+import { TagsInput as K } from "../_inner/tags-input/tags-input.js";
+import j from "../_inner/tags-input/styles/tags-input.module.css.js";
+import { BaseInput as B } from "../base-input/base-input.js";
+import c from "./styles/tree-select.module.css.js";
+function H({
+  ref: m,
+  size: u = "md",
+  placeholder: o,
+  disabled: p,
+  clearable: k,
+  error: w,
+  singleLine: x,
+  borderRadius: f = "full",
+  id: g,
+  selectionMode: F = "single",
+  selectedIds: I,
+  tree: d,
+  getItemName: y,
+  onRemove: h,
+  onClick: r,
+  onClear: N,
+  dropdownOpened: b,
+  classNames: D,
+  "aria-label": v,
+  "aria-describedby": S
+}) {
+  if (F === "multi") {
+    const t = I.map((e) => {
+      let n;
+      try {
+        n = d.getItemInstance(e)?.getItemData();
+      } catch {
+        n = void 0;
+      }
+      return n != null ? { id: e, label: y(n) } : null;
+    }).filter((e) => e !== null), T = () => /* @__PURE__ */ l(
+      E.Field,
+      {
+        "data-size": u,
+        className: i(
+          c.pillInputField,
+          j.pillInputField
+        ),
+        readOnly: !0,
+        disabled: p,
+        value: "",
+        placeholder: t.length > 0 ? void 0 : o,
+        onKeyDown: (e) => {
+          e.key === "Backspace" && t.length > 0 ? (e.preventDefault(), h?.(t[t.length - 1].id)) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.());
+        }
+      }
+    );
+    return /* @__PURE__ */ l("div", { ref: m, className: i(D?.target), children: /* @__PURE__ */ l(
+      K,
+      {
+        tags: t,
+        onRemove: h,
+        onClick: r,
+        placeholder: o,
+        singleLine: x,
+        borderRadius: f,
+        dropdownOpened: b,
+        renderInput: T,
+        size: u,
+        id: g,
+        "aria-label": v,
+        "aria-describedby": S
+      }
+    ) });
+  }
+  const s = I[0];
+  let a = null;
+  if (s)
+    try {
+      a = d.getItemInstance(s)?.getItemData();
+    } catch {
+      a = null;
+    }
+  const O = a != null ? y(a) : void 0;
+  return /* @__PURE__ */ l("div", { ref: m, className: i(D?.target), children: /* @__PURE__ */ l(
+    B,
+    {
+      size: u,
+      imeSafe: !1,
+      value: O ?? "",
+      placeholder: o,
+      disabled: p,
+      clearable: k && !!s,
+      error: w,
+      borderRadius: f,
+      id: g,
+      "aria-label": v,
+      "aria-describedby": S,
+      readOnly: !0,
+      pointer: !0,
+      rightIconName: "arrow-down-filled",
+      rightIconUseOriginalColor: !0,
+      rightIconClassName: i(
+        c.targetIcon,
+        b && c.targetIconOpen
+      ),
+      onClear: N,
+      onClick: r,
+      onKeyDown: (t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r?.());
+      }
+    }
+  ) });
+}
+export {
+  H as TreeSelectTarget
+};

package/dist/components/tree-select/tree-select.d.ts

@@ -0,0 +1,21 @@
+import { TreeSelectProps } from './tree-select.types';
+/**
+ * 下拉树选择器（Web-only）
+ *
+ * @example
+ * ```tsx
+ * <TreeSelect
+ *   data={[{ data: { id: '1', name: '技术类' }, children: [...] }]}
+ *   getItemId={item => item.id}
+ *   getItemName={item => item.name}
+ *   // isItemFolder={item => item.hasChildren} // 可选，不传默认使用 item.children 判断
+ *   value={value}
+ *   onChange={setValue}
+ *   placeholder="请选择分类"
+ * />
+ * ```
+ */
+export declare function TreeSelect<T = unknown>(props: Readonly<TreeSelectProps<T>>): import("react").JSX.Element;
+export declare namespace TreeSelect {
+    var displayName: string;
+}