@wisdomgarden/torque 0.1.0

package/dist/components/_inner/table/head/table-head-filter-single-select.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Icon as h } from "@wisdomgarden/torque-icons";
+import { clsx as i } from "clsx";
+import { Combobox as s } from "../../../combobox/combobox.js";
+import { useCombobox as u } from "../../../combobox/hooks/use-combobox.js";
+import { OptionsDropDown as S } from "../../dropdown/options-drop-down.js";
+import { TruncatedHeaderTitle as T } from "../table-header-title.js";
+import t from "./table-head.module.css.js";
+const D = ({
+  filterIconName: a = "arrow-down-filled",
+  filterOptions: p = [],
+  filterValue: n,
+  onFilterChange: d,
+  accessor: r,
+  withTitle: c = !0,
+  fillCell: f = !0,
+  title: o,
+  withPadding: b = !0,
+  emptyState: g
+}) => {
+  const l = u();
+  return /* @__PURE__ */ m(
+    s,
+    {
+      store: l,
+      position: "bottom-start",
+      onOptionSubmit: (x) => {
+        d?.(String(x));
+      },
+      children: [
+        /* @__PURE__ */ e(s.Target, { children: /* @__PURE__ */ m(
+          "div",
+          {
+            className: i(
+              t.singleSelectControl,
+              f && t.fillCell,
+              b && t.withPadding
+            ),
+            role: "button",
+            tabIndex: 0,
+            "aria-label": typeof o == "string" ? o : String(r),
+            children: [
+              c && /* @__PURE__ */ e("span", { className: i(t.title, t.titleWithTextSize), children: /* @__PURE__ */ e(T, { children: o || String(r) }) }),
+              /* @__PURE__ */ e(
+                h,
+                {
+                  name: a,
+                  width: 16,
+                  height: 16,
+                  className: i(
+                    t.filterIconAnimated,
+                    l.opened && t.filterIconOpen,
+                    n ? t.textBrand : t.fillText
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          S,
+          {
+            options: p,
+            value: n,
+            title: typeof o == "string" ? o : String(r),
+            emptyState: g
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  D as TableHeadFilterSingleSelect
+};

package/dist/components/_inner/table/head/table-head-sort.d.ts

@@ -0,0 +1,16 @@
+import type { SortType, TableColumn } from '../../../table/table.types';
+/** 表格头排序 */
+export declare const TableHeadSort: <T>({ sortOrder, onSortChange, withTitle, fillCell, title, accessor, withPadding, className, }: TableColumn<T> & {
+    /** 排序顺序 {@link SortType} */
+    readonly sortOrder?: SortType;
+    /** 排序改变回调 @param val 排序顺序 - {@link SortType} */
+    readonly onSortChange?: (val: SortType) => void;
+    /** 是否显示标题 默认true */
+    readonly withTitle?: boolean;
+    /** 是否填充满单元格 默认true */
+    readonly fillCell?: boolean;
+    /** 是否在两边显示padding 默认true */
+    readonly withPadding?: boolean;
+    /** 自定义容器类名 */
+    readonly className?: string;
+}) => import("react").JSX.Element;

package/dist/components/_inner/table/head/table-head-sort.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { Icon as h } from "@wisdomgarden/torque-icons";
+import { clsx as p } from "clsx";
+import { TruncatedHeaderTitle as x } from "../table-header-title.js";
+import e from "./table-head.module.css.js";
+const T = ({
+  sortOrder: t,
+  onSortChange: o,
+  withTitle: r = !0,
+  fillCell: c = !0,
+  title: n,
+  accessor: a,
+  withPadding: d = !0,
+  className: m
+}) => {
+  const f = () => {
+    let i;
+    t === "asc" ? i = "desc" : t === "desc" ? i = void 0 : i = "asc", o?.(i);
+  };
+  let l;
+  return t ? t === "asc" ? l = "sorted-fill-asc" : l = "sorted-fill-desc" : l = "unsorted-fill", /* @__PURE__ */ u(
+    "button",
+    {
+      type: "button",
+      className: p(
+        e.sortControl,
+        c && e.fillCell,
+        d && e.withPadding,
+        m
+      ),
+      onClick: f,
+      children: [
+        r && /* @__PURE__ */ s("span", { className: e.title, children: /* @__PURE__ */ s(x, { children: n || String(a) }) }),
+        /* @__PURE__ */ s(
+          h,
+          {
+            name: l,
+            width: 16,
+            height: 16,
+            useOriginalColor: !0,
+            className: e.sortIcon
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  T as TableHeadSort
+};

package/dist/components/_inner/table/head/table-head.module.css.js

@@ -0,0 +1,40 @@
+"use client";
+const t = "_control_1bqlh_2", o = "_singleSelectControl_1bqlh_3", l = "_sortControl_1bqlh_4", n = "_fillCell_1bqlh_18", e = "_withPadding_1bqlh_33", _ = "_title_1bqlh_37", i = "_titleWithTextSize_1bqlh_42", r = "_filterDropdown_1bqlh_46", c = "_searchInput_1bqlh_50", s = "_footer_1bqlh_54", h = "_footerButton_1bqlh_62", f = "_sortIcon_1bqlh_66", b = "_filterIcon_1bqlh_70", q = "_filterIconOpen_1bqlh_75", d = "_filterIconAnimated_1bqlh_79", I = "_textBrand_1bqlh_84", a = "_fillText_1bqlh_88", p = {
+  control: t,
+  singleSelectControl: o,
+  sortControl: l,
+  fillCell: n,
+  withPadding: e,
+  title: _,
+  titleWithTextSize: i,
+  filterDropdown: r,
+  searchInput: c,
+  footer: s,
+  footerButton: h,
+  sortIcon: f,
+  filterIcon: b,
+  filterIconOpen: q,
+  filterIconAnimated: d,
+  textBrand: I,
+  fillText: a
+};
+export {
+  t as control,
+  p as default,
+  n as fillCell,
+  a as fillText,
+  r as filterDropdown,
+  b as filterIcon,
+  d as filterIconAnimated,
+  q as filterIconOpen,
+  s as footer,
+  h as footerButton,
+  c as searchInput,
+  o as singleSelectControl,
+  l as sortControl,
+  f as sortIcon,
+  I as textBrand,
+  _ as title,
+  i as titleWithTextSize,
+  e as withPadding
+};

package/dist/components/_inner/table/index.d.ts

@@ -0,0 +1,5 @@
+export { TableHeaderTitle } from './table-header-title';
+export { TableHeadSort } from './head/table-head-sort';
+export { TableHeadFilterSingleSelect } from './head/table-head-filter-single-select';
+export { TableHeadFilterMultiSelect } from './head/table-head-filter-multi-select';
+export { TableHeadFilterSearch } from './head/table-head-filter-search';

package/dist/components/_inner/table/index.js

@@ -0,0 +1,13 @@
+"use client";
+import { TableHeaderTitle as l } from "./table-header-title.js";
+import { TableHeadSort as a } from "./head/table-head-sort.js";
+import { TableHeadFilterSingleSelect as i } from "./head/table-head-filter-single-select.js";
+import { TableHeadFilterMultiSelect as b } from "./head/table-head-filter-multi-select.js";
+import { TableHeadFilterSearch as f } from "./head/table-head-filter-search.js";
+export {
+  b as TableHeadFilterMultiSelect,
+  f as TableHeadFilterSearch,
+  i as TableHeadFilterSingleSelect,
+  a as TableHeadSort,
+  l as TableHeaderTitle
+};

package/dist/components/_inner/table/table-header-title.d.ts

@@ -0,0 +1,7 @@
+import type { TableColumn } from '../../table/table.types';
+export declare const TruncatedHeaderTitle: ({ children, }: {
+    readonly children: React.ReactNode;
+}) => bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare const TableHeaderTitle: <T>({ column, }: {
+    readonly column: TableColumn<T>;
+}) => import("react").JSX.Element;

package/dist/components/_inner/table/table-header-title.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { Space as s } from "@mantine/core";
+import { clsx as l } from "clsx";
+import { Tooltip as d } from "../../tooltip/index.js";
+import t from "./table-header-title.module.css.js";
+const n = ({
+  children: e
+}) => {
+  if (typeof e != "string" && typeof e != "number")
+    return e;
+  const i = String(e);
+  return /* @__PURE__ */ r(d, { showOnlyWhenTruncated: !0, label: i, children: i });
+}, f = ({
+  column: e
+}) => /* @__PURE__ */ a("div", { className: l(t.root, e.titleClassName), children: [
+  !e.renderTitle && /* @__PURE__ */ r("div", { className: t.spacer, children: /* @__PURE__ */ r(s, { w: 16 }) }),
+  e.renderTitle ? e.renderTitle?.(e) : /* @__PURE__ */ r("div", { className: t.title, children: /* @__PURE__ */ r(n, { children: e.title ?? String(e.accessor) }) }),
+  !e.renderTitle && /* @__PURE__ */ r("div", { className: t.spacer, children: /* @__PURE__ */ r(s, { w: 16 }) })
+] });
+export {
+  f as TableHeaderTitle,
+  n as TruncatedHeaderTitle
+};

package/dist/components/_inner/table/table-header-title.module.css.js

@@ -0,0 +1,12 @@
+"use client";
+const t = "_root_5mh9c_2", c = "_spacer_5mh9c_14", e = "_title_5mh9c_18", o = {
+  root: t,
+  spacer: c,
+  title: e
+};
+export {
+  o as default,
+  t as root,
+  c as spacer,
+  e as title
+};

package/dist/components/_inner/tags-input/hooks/use-height-transition.d.ts

@@ -0,0 +1,15 @@
+interface UseHeightTransitionOptions {
+    disabled?: boolean;
+    duration?: number;
+    easing?: string;
+}
+/**
+ * 为元素高度变化添加过渡动画。
+ *
+ * 通过 ResizeObserver 监听高度变化，触发时先断开 observer 再执行动画，
+ * 动画结束后重连，避免动画过程中触发反馈循环。
+ *
+ * @returns RefCallback，挂到目标元素上即可生效
+ */
+export declare function useHeightTransition<T extends HTMLElement>({ disabled, duration, easing, }?: UseHeightTransitionOptions): React.RefCallback<T>;
+export {};

package/dist/components/_inner/tags-input/hooks/use-height-transition.js

@@ -0,0 +1,31 @@
+"use client";
+import { useRef as u, useCallback as f } from "react";
+function g({
+  disabled: c = !1,
+  duration: i = 200,
+  easing: o = "ease"
+} = {}) {
+  const t = u(null), n = u(0);
+  return f(
+    (e) => {
+      if (t.current?.disconnect(), t.current = null, !e || c) return;
+      const r = new ResizeObserver(() => {
+        const s = e.offsetHeight;
+        n.current > 0 && s !== n.current ? (r.disconnect(), e.animate(
+          [
+            { height: `${n.current}px` },
+            { height: `${s}px` }
+          ],
+          { duration: i, easing: o, fill: "none" }
+        ).onfinish = () => {
+          n.current = e.offsetHeight, e.isConnected && r.observe(e);
+        }) : n.current = s;
+      });
+      r.observe(e), t.current = r;
+    },
+    [c, i, o]
+  );
+}
+export {
+  g as useHeightTransition
+};

package/dist/components/_inner/tags-input/hooks/use-is-wrapped.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 检测容器内子元素是否发生了换行。
+ *
+ * 通过比较首尾子元素的 offsetTop 判断是否存在换行，
+ * 结合 ResizeObserver 在容器尺寸变化时实时更新。
+ *
+ * @returns [ref, isWrapped] — ref 挂到容器元素上，isWrapped 表示当前是否已换行
+ */
+export declare function useIsWrapped<T extends HTMLElement>(): [
+    React.RefObject<T | null>,
+    boolean
+];

package/dist/components/_inner/tags-input/hooks/use-is-wrapped.js

@@ -0,0 +1,24 @@
+"use client";
+import { useRef as f, useState as i, useCallback as p, useLayoutEffect as a } from "react";
+function d() {
+  const r = f(null), [o, n] = i(!0), s = p(() => {
+    const t = r.current;
+    if (!t) return;
+    const e = t.children;
+    if (e.length <= 1) {
+      n(!1);
+      return;
+    }
+    const c = e[0].offsetTop, u = e[e.length - 1].offsetTop;
+    n(u > c);
+  }, []);
+  return a(() => {
+    const t = r.current;
+    if (!t) return;
+    const e = new ResizeObserver(s);
+    return e.observe(t), () => e.disconnect();
+  }, [s]), [r, o];
+}
+export {
+  d as useIsWrapped
+};

package/dist/components/_inner/tags-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TagsInput } from './tags-input';
+export type { TagsInputProps, TagItem } from './tags-input.types';

package/dist/components/_inner/tags-input/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { TagsInput as n } from "./tags-input.js";
+export {
+  n as TagsInput
+};

package/dist/components/_inner/tags-input/styles/tags-input.module.css.js

@@ -0,0 +1,48 @@
+"use client";
+const t = "_pillsInput_16vpg_1 _pillsInput_10vjo_2", p = "_pillsInputDisabled_16vpg_21", e = "_pillsInputError_16vpg_33", l = "_pillsInputSection_16vpg_37", o = "_pillInputField_16vpg_41", n = "_tag_16vpg_52", _ = "_tagSingle_16vpg_64", g = "_tagMulti_16vpg_75", i = "_tagText_16vpg_83", s = "_removeWrapSingle_16vpg_91", r = "_removeWrap_16vpg_91", a = "_removeIcon_16vpg_110", c = "_placeholder_16vpg_115", v = "_endGroup_16vpg_121", d = "_toggleDisabled_16vpg_126", u = "_dropdownArrow_16vpg_130", I = "_dropdownArrowOpen_16vpg_134", w = "_tagDelete_16vpg_138", S = "_pillGroup_16vpg_142", m = "_tagList_16vpg_149", D = "_tagListSingleLine_16vpg_154", L = {
+  pillsInput: t,
+  pillsInputDisabled: p,
+  pillsInputError: e,
+  pillsInputSection: l,
+  pillInputField: o,
+  tag: n,
+  tagSingle: _,
+  tagMulti: g,
+  tagText: i,
+  removeWrapSingle: s,
+  removeWrap: r,
+  removeIcon: a,
+  placeholder: c,
+  endGroup: v,
+  toggleDisabled: d,
+  dropdownArrow: u,
+  dropdownArrowOpen: I,
+  tagDelete: w,
+  pillGroup: S,
+  tagList: m,
+  tagListSingleLine: D
+};
+export {
+  L as default,
+  u as dropdownArrow,
+  I as dropdownArrowOpen,
+  v as endGroup,
+  S as pillGroup,
+  o as pillInputField,
+  t as pillsInput,
+  p as pillsInputDisabled,
+  e as pillsInputError,
+  l as pillsInputSection,
+  c as placeholder,
+  a as removeIcon,
+  r as removeWrap,
+  s as removeWrapSingle,
+  n as tag,
+  w as tagDelete,
+  m as tagList,
+  D as tagListSingleLine,
+  g as tagMulti,
+  _ as tagSingle,
+  i as tagText,
+  d as toggleDisabled
+};

package/dist/components/_inner/tags-input/tags-input-tag.d.ts

@@ -0,0 +1,13 @@
+import { SimpleComponentSizeBase } from '../../../common/components.types';
+interface TagsInputTagProps {
+    readonly size: SimpleComponentSizeBase;
+    readonly children: React.ReactNode;
+    readonly singleLine?: boolean;
+    readonly onRemove?: () => void;
+    readonly deletable?: boolean;
+}
+/**
+ * 单个 Tag，根据 singleLine 切换单行/多行两种渲染形态
+ */
+export declare const TagsInputTag: ({ singleLine, onRemove, size, children, deletable, }: TagsInputTagProps) => import("react").JSX.Element;
+export {};

package/dist/components/_inner/tags-input/tags-input-tag.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { Icon as n } from "@wisdomgarden/torque-icons";
+import { clsx as s } from "clsx";
+import { Box as o } from "../../box/box.js";
+import { Text as h } from "../../text/text.js";
+import e from "./styles/tags-input.module.css.js";
+const I = ({
+  singleLine: l,
+  onRemove: g,
+  size: t,
+  children: r,
+  deletable: m = !0
+}) => {
+  const i = (p) => {
+    p.stopPropagation(), g?.();
+  };
+  return l ? /* @__PURE__ */ c(o, { "data-size": t, className: s(e.tag, e.tagSingle), children: [
+    r,
+    m && /* @__PURE__ */ a(
+      o,
+      {
+        className: s(e.removeWrapSingle, e.tagDelete),
+        "data-size": t,
+        children: /* @__PURE__ */ a(
+          n,
+          {
+            name: "close",
+            width: 14,
+            height: 14,
+            className: e.removeIcon,
+            onClick: i
+          }
+        )
+      }
+    )
+  ] }) : /* @__PURE__ */ c(o, { "data-size": t, className: s(e.tag, e.tagMulti), children: [
+    /* @__PURE__ */ a(h, { className: e.tagText, children: r }),
+    m && /* @__PURE__ */ a(o, { className: e.removeWrap, "data-size": t, children: /* @__PURE__ */ a(
+      n,
+      {
+        name: "close",
+        width: 14,
+        height: 14,
+        className: e.removeIcon,
+        onClick: i
+      }
+    ) })
+  ] });
+};
+export {
+  I as TagsInputTag
+};

package/dist/components/_inner/tags-input/tags-input.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TagsInputProps } from './tags-input.types';
+/**
+ * 带标签展示的输入框（多选触发器外观）
+ *
+ * 与业务数据结构解耦：接收预先解析好的 `tags` 列表，不依赖 options/value。
+ * 同时作为 MultiSelect 和 TreeSelect（多选模式）的共用触发器。
+ */
+export declare const TagsInput: ({ size, tags, onRemove, onClick, onPointerDown, placeholder, renderInput, singleLine, borderRadius, dropdownOpened, onToggleDropdown, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, error, disabled, clearable, onClear, ref, ...rootProps }: TagsInputProps) => React.JSX.Element;

package/dist/components/_inner/tags-input/tags-input.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { PillsInput as E, Pill as F, Group as f } from "@mantine/core";
+import { clsx as n } from "clsx";
+import "../../../provider/ui-context.js";
+import "react";
+import { useLocale as H } from "../../../provider/hooks.js";
+import { IconButton as g } from "../../icon-button/icon-button.js";
+import { useHeightTransition as M } from "./hooks/use-height-transition.js";
+import { useIsWrapped as q } from "./hooks/use-is-wrapped.js";
+import o from "./styles/tags-input.module.css.js";
+import { TagsInputTag as v } from "./tags-input-tag.js";
+const $ = ({
+  size: p = "md",
+  tags: a = [],
+  onRemove: w,
+  onClick: b,
+  onPointerDown: I,
+  placeholder: N,
+  renderInput: d,
+  singleLine: l = !0,
+  borderRadius: x = "full",
+  dropdownOpened: m,
+  onToggleDropdown: C,
+  id: G,
+  "aria-label": T,
+  "aria-describedby": P,
+  error: u,
+  disabled: t,
+  clearable: R,
+  onClear: k,
+  ref: y,
+  ...D
+}) => {
+  const c = H(), [j, A] = q(), S = M({ disabled: l }), W = l && a.length > 2 ? a.slice(0, 2) : a, h = l ? Math.max(0, a.length - 2) : 0, B = R && a.length > 0 && !t, i = t ? void 0 : C;
+  return /* @__PURE__ */ e("div", { ref: S, children: /* @__PURE__ */ e(
+    E,
+    {
+      ...D,
+      ref: y,
+      onClick: t ? void 0 : b,
+      onPointerDown: I,
+      size: p,
+      error: !!u,
+      disabled: t,
+      classNames: {
+        input: n(
+          o.pillsInput,
+          u && o.pillsInputError,
+          t && o.pillsInputDisabled
+        ),
+        section: o.pillsInputSection
+      },
+      pointer: !0,
+      "data-single-line": l,
+      "data-wrapped": A,
+      "data-size": p,
+      "data-border-radius": x,
+      "data-value-length": a.length,
+      id: G,
+      "aria-label": T,
+      "aria-describedby": P,
+      children: /* @__PURE__ */ s(F.Group, { gap: 8, className: o.pillGroup, children: [
+        /* @__PURE__ */ s(
+          f,
+          {
+            ref: j,
+            gap: 4,
+            className: n(o.tagList, {
+              [o.tagListSingleLine]: l
+            }),
+            children: [
+              W.map((r) => /* @__PURE__ */ e(
+                v,
+                {
+                  singleLine: l,
+                  size: p,
+                  onRemove: t ? void 0 : () => w?.(r.id),
+                  children: r.label
+                },
+                r.id
+              )),
+              h > 0 && /* @__PURE__ */ s(v, { singleLine: !1, size: p, deletable: !1, children: [
+                "+",
+                h,
+                "..."
+              ] }),
+              d ? d() : a.length === 0 && /* @__PURE__ */ e(
+                "span",
+                {
+                  className: n(
+                    o.pillInputField,
+                    o.placeholder
+                  ),
+                  children: N
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(f, { gap: 4, wrap: "nowrap", className: o.endGroup, children: [
+          B && /* @__PURE__ */ e(
+            g,
+            {
+              iconName: "icon-clear-input",
+              variant: "text",
+              color: "secondary",
+              "aria-label": c.clear,
+              className: o.endGroup,
+              onClick: (r) => {
+                r.stopPropagation(), k?.();
+              }
+            }
+          ),
+          /* @__PURE__ */ e(
+            g,
+            {
+              iconName: "arrow-down-filled",
+              variant: "text",
+              color: "regular",
+              "aria-label": i ? m ? c.collapse : c.expand : "",
+              className: n(
+                o.endGroup,
+                !i && o.toggleDisabled
+              ),
+              iconClassName: n(
+                o.dropdownArrow,
+                m && o.dropdownArrowOpen
+              ),
+              renderRoot: i ? void 0 : (r) => /* @__PURE__ */ e("span", { ...r }),
+              onClick: (r) => {
+                i && (r.stopPropagation(), i());
+              }
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+};
+export {
+  $ as TagsInput
+};