@wisdomgarden/torque 0.1.0

package/dist/components/tag/closable-tag.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { Icon as a } from "@wisdomgarden/torque-icons";
+import "../../provider/ui-context.js";
+import "react";
+import { useLocale as m } from "../../provider/hooks.js";
+import s from "./styles/tag.module.css.js";
+import { Tag as c } from "./tag.js";
+const C = ({
+  children: t,
+  onCloseClick: e,
+  ...r
+}) => {
+  const l = m();
+  return /* @__PURE__ */ o(
+    c,
+    {
+      ...r,
+      rightSection: /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          "aria-label": l.close,
+          onClick: e,
+          className: s.tagClosableButton,
+          children: /* @__PURE__ */ o(a, { name: "close" })
+        }
+      ),
+      children: t
+    }
+  );
+};
+export {
+  C as ClosableTag
+};

package/dist/components/tag/icon-tag.d.ts

@@ -0,0 +1,2 @@
+import { IconTagProps } from './tag.types';
+export declare const IconTag: ({ children, iconName, iconClassName, renderIcon, ...restProps }: IconTagProps) => import("react").JSX.Element;

package/dist/components/tag/icon-tag.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { Icon as e } from "@wisdomgarden/torque-icons";
+import { clsx as a } from "clsx";
+import o from "./styles/tag.module.css.js";
+import { Tag as g } from "./tag.js";
+const x = ({
+  children: n,
+  iconName: c,
+  iconClassName: s,
+  renderIcon: r,
+  ...t
+}) => /* @__PURE__ */ m(
+  g,
+  {
+    ...t,
+    className: a("icon-tag-root", t.className),
+    leftSection: r?.({
+      className: a(o.tagIcon, o.tagIconSpacing)
+    }) ?? (c && /* @__PURE__ */ m(
+      e,
+      {
+        name: c,
+        className: a(
+          o.tagIcon,
+          s,
+          o.tagIconSpacing
+        )
+      }
+    )),
+    children: n
+  }
+);
+export {
+  x as IconTag
+};

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

@@ -0,0 +1,5 @@
+export * from './tag';
+export * from './closable-tag';
+export * from './icon-tag';
+export * from './link-tag';
+export type * from './tag.types';

package/dist/components/tag/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { Tag as e } from "./tag.js";
+import { ClosableTag as t } from "./closable-tag.js";
+import { IconTag as g } from "./icon-tag.js";
+import { LinkTag as p } from "./link-tag.js";
+export {
+  t as ClosableTag,
+  g as IconTag,
+  p as LinkTag,
+  e as Tag
+};

package/dist/components/tag/link-tag.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { TagProps } from './tag.types';
+export type LinkTagProps = TagProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    readonly href: string;
+};
+/**
+ * 带标签外观的链接。
+ *
+ * 根元素取自 `UiProvider` 的 `linkComponent`；未配置时为原生 `<a>`。
+ */
+export declare const LinkTag: ({ href, onClick, onKeyDown, ...others }: LinkTagProps) => React.JSX.Element;

package/dist/components/tag/link-tag.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useUiLink as c } from "../../provider/hooks.js";
+import { Tag as k } from "./tag.js";
+const d = ({
+  href: r,
+  onClick: e,
+  onKeyDown: o,
+  ...t
+}) => {
+  const m = c("LinkTag");
+  return /* @__PURE__ */ n(
+    k,
+    {
+      ...t,
+      renderRoot: (i) => /* @__PURE__ */ n(
+        m,
+        {
+          ...i,
+          href: r,
+          onClick: e,
+          onKeyDown: o,
+          children: i.children
+        }
+      )
+    }
+  );
+};
+export {
+  d as LinkTag
+};

package/dist/components/tag/styles/tag-variables.module.css.js

@@ -0,0 +1,8 @@
+"use client";
+const a = "_tagVars_bwxhz_2", s = {
+  tagVars: a
+};
+export {
+  s as default,
+  a as tagVars
+};

package/dist/components/tag/styles/tag.module.css.js

@@ -0,0 +1,18 @@
+"use client";
+const t = "_tag_r2m14_2", a = "_tagClosableButton_r2m14_36", n = "_tagLeftSection_r2m14_52", o = "_tagRightSection_r2m14_56", c = "_tagIcon_r2m14_60", g = "_tagIconSpacing_r2m14_65", _ = {
+  tag: t,
+  tagClosableButton: a,
+  tagLeftSection: n,
+  tagRightSection: o,
+  tagIcon: c,
+  tagIconSpacing: g
+};
+export {
+  _ as default,
+  t as tag,
+  a as tagClosableButton,
+  c as tagIcon,
+  g as tagIconSpacing,
+  n as tagLeftSection,
+  o as tagRightSection
+};

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TagProps } from './tag.types';
+/**
+ * 基础标签组件。
+ *
+ * - 传入 `onClick` 后自动呈现可点击的 hover/active 交互样式。
+ * - `children` 超出宽度时自动显示 Tooltip。
+ * - 左侧需要图标时优先使用 `IconTag`，需要关闭功能时优先使用 `ClosableTag`，
+ *   其余特殊场景再通过 `leftSection` / `rightSection` 插入自定义内容。
+ * - 需要渲染为链接时使用 `LinkTag` 或通过 `renderRoot` 自定义根节点。
+ *
+ * @example
+ * // 基础用法
+ * <Tag variant="outline" color="brand" size="sm">标签</Tag>
+ *
+ * @example
+ * // 可点击
+ * <Tag onClick={() => {}}>可点击标签</Tag>
+ *
+ * @example
+ * // 自定义插槽
+ * <Tag leftSection={<MyIcon />} rightSection={<CloseBtn />}>内容</Tag>
+ *
+ * @example
+ * // 自定义根节点
+ * <Tag renderRoot={props => <a href="/path" {...props} />}>链接标签</Tag>
+ */
+export declare const Tag: (_props: TagProps) => React.JSX.Element;

package/dist/components/tag/tag.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as o, jsxs as b, Fragment as v } from "react/jsx-runtime";
+import { clsx as y } from "clsx";
+import { Tooltip as k } from "../tooltip/index.js";
+import x from "./styles/tag-variables.module.css.js";
+import n from "./styles/tag.module.css.js";
+const K = (m) => {
+  const {
+    children: a,
+    renderRoot: i,
+    className: f,
+    variant: u = "outline",
+    color: h = "brand",
+    borderRadius: p = "full",
+    size: g = "sm",
+    leftSection: s,
+    rightSection: c,
+    ...t
+  } = m, r = !!t.onClick, l = {
+    className: y(n.tag, x.tagVars, f),
+    "data-variant": u,
+    "data-color": h,
+    "data-border-radius": p,
+    "data-size": g,
+    "data-click": r ? "true" : "false",
+    ...r && { role: "button", tabIndex: 0 },
+    ...t,
+    onKeyDown: r ? (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.onClick?.(e)), t.onKeyDown?.(e);
+    } : t.onKeyDown
+  }, d = /* @__PURE__ */ b(v, { children: [
+    s && /* @__PURE__ */ o("div", { className: n.tagLeftSection, children: s }),
+    /* @__PURE__ */ o(k, { label: a, showOnlyWhenTruncated: !0, children: /* @__PURE__ */ o("div", { className: n.tagContent, children: a }) }),
+    c && /* @__PURE__ */ o("div", { className: n.tagRightSection, children: c })
+  ] });
+  return typeof i == "function" ? i({ ...l, children: d }) : /* @__PURE__ */ o("span", { ...l, children: d });
+};
+export {
+  K as Tag
+};

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

@@ -0,0 +1,72 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { CommonColor, RefProps } from '../../common/components.types';
+import type { IconName } from '@wisdomgarden/torque-icons';
+export type TagVariant = 'outline' | 'light' | 'filled';
+export type TagColor = CommonColor | 'white';
+export type TagBorderRadius = 'xs' | 'full';
+export type TagSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface TagProps extends HTMLAttributes<HTMLDivElement>, RefProps<HTMLElement> {
+    /**
+     * 变体
+     * outline: 带边框的标签
+     * light: 浅色标签
+     * filled: 填充主色标签
+     * @default 'outline'
+     */
+    variant?: TagVariant;
+    /**
+     * 色系:
+     * 红 橙 黄 绿 品牌青 蓝  air蓝 紫 粉紫 灰
+     * @default 'red'
+     */
+    color?: TagColor;
+    /**
+     * 圆角
+     * xs: 圆角矩形
+     * full: 全圆角
+     * @default 'full'
+     */
+    borderRadius?: TagBorderRadius;
+    /**
+     * 标签的大小
+     */
+    size?: TagSize;
+    /**
+     * 右侧部分 一般是操作按钮
+     */
+    rightSection?: ReactNode;
+    /**
+     * 左侧部分 一般是图标
+     */
+    leftSection?: ReactNode;
+    /**
+     * 标签内容,一般为文字，或者文字加图标
+     */
+    children: ReactNode;
+    /**
+     * 自定义渲染根节点的方法，允许使用其他标签（如 a 标签、Link组件等）替换默认的 span 标签
+     */
+    renderRoot?: (props: any) => React.ReactElement;
+}
+export interface IconTagProps extends TagProps {
+    /**
+     * 左侧显示的图标名称
+     */
+    readonly iconName?: IconName;
+    /**
+     * 左侧图标自定义类名
+     */
+    readonly iconClassName?: string;
+    /**
+     * 可以自己渲染左侧图标
+     */
+    readonly renderIcon?: (props: {
+        className: string;
+    }) => React.ReactNode;
+}
+export interface ClosableTagProps extends TagProps {
+    /**
+     * 点击关闭按钮时的回调函数
+     */
+    readonly onCloseClick: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { Text } from './text';
+export type * from './text.types';

package/dist/components/text/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { Text as o } from "./text.js";
+export {
+  o as Text
+};

package/dist/components/text/text.d.ts

@@ -0,0 +1,3 @@
+import { LayoutElement } from '../box/box.types';
+import type { TextProps } from './text.types';
+export declare function Text<T extends LayoutElement>(props: TextProps<T>): import("react").JSX.Element;

package/dist/components/text/text.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { clsx as d } from "clsx";
+import { Box as p } from "../box/box.js";
+import u from "./text.module.css.js";
+function N(o) {
+  const {
+    component: a = "p",
+    size: t = "md",
+    fz: r,
+    lh: e,
+    fw: s,
+    truncate: m = !1,
+    className: c,
+    children: n,
+    ...f
+  } = o, l = {
+    "data-truncate": m,
+    "data-fz": r ?? t,
+    "data-lh": e ?? t,
+    "data-fw": s
+  };
+  return /* @__PURE__ */ i(
+    p,
+    {
+      component: a,
+      className: d(u.root, c),
+      ...f,
+      ...l,
+      children: n
+    }
+  );
+}
+export {
+  N as Text
+};

package/dist/components/text/text.module.css.js

@@ -0,0 +1,8 @@
+"use client";
+const o = "_root_168yl_2", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

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

@@ -0,0 +1,11 @@
+import { BoxProps, LayoutElement } from '../box/box.types';
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type TextFontWeight = 'normal' | 'medium';
+export interface TextOwnProps {
+    readonly size?: TextSize;
+    readonly fz?: TextSize;
+    readonly lh?: TextSize;
+    readonly fw?: TextFontWeight;
+    readonly truncate?: boolean;
+}
+export type TextProps<T extends LayoutElement = 'p'> = TextOwnProps & BoxProps<T>;

package/dist/components/text-area/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea } from './text-area';
+export type { TextAreaProps } from './text-area.types';

package/dist/components/text-area/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { TextArea as t } from "./text-area.js";
+export {
+  t as TextArea
+};

package/dist/components/text-area/text-area.d.ts

@@ -0,0 +1,9 @@
+import { TextAreaProps } from './text-area.types';
+/**
+ * 多行文本输入框组件
+ * 基于 Mantine 的 Textarea 封装，内置字数统计、表单集成和统一的错误状态样式。
+ * 支持通过 `maxLength` 限制长度，并在右下角展示已输入的字符数（受控模式或使用 form 的情况下生效）。
+ *
+ * @param props - TextArea 组件的属性配置，详细请参考 `TextAreaProps`
+ */
+export declare const TextArea: (props: TextAreaProps) => import("react").JSX.Element;

package/dist/components/text-area/text-area.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as F, jsxs as y } from "react/jsx-runtime";
+import { Textarea as q } from "@mantine/core";
+import { useId as G, useMergedRef as H } from "@mantine/hooks";
+import { clsx as c } from "clsx";
+import { useRef as B, useEffect as I, useReducer as J } from "react";
+import { useFormWrapperProps as K } from "../../common/use-form-wrapper-props.js";
+import { useImeSafeInput as Q } from "../../common/use-ime-safe-input.js";
+import { FormItemWrapper as U } from "../form-wrapper/form-item-wrapper.js";
+import n from "./text-area.module.css.js";
+const L = (e) => typeof e == "string" ? e : "", re = (e) => {
+  const f = G(e.id), { wrapProps: d, outerDescribedBy: S } = K(
+    { ...e, borderRadius: void 0 },
+    f
+  ), {
+    resize: z = "vertical",
+    disabled: T = !1,
+    showMaxLengthTip: V = !0,
+    rows: x = 2,
+    autosize: a,
+    minRows: W,
+    maxRows: j,
+    imeSafe: M = !0,
+    borderRadius: P = "md",
+    fill: s = !1
+  } = e, o = {
+    ...e.fieldName && e.form?.getInputProps(e.fieldName)
+  };
+  typeof o == "object" && (o.error = !!o.error);
+  const { ref: A } = e, v = B(null), O = H(v, A), { maxLength: i } = e, r = o.value ?? e.value, m = i !== void 0 && typeof r == "string" && r.length > i ? r.slice(0, i) : r, b = M && m !== void 0, l = Q(m, (t) => {
+    if (e.form && e.fieldName)
+      e.form.setFieldValue(e.fieldName, t);
+    else {
+      const u = v.current, w = {
+        nativeEvent: new Event("input"),
+        target: u ?? { value: t },
+        currentTarget: u ?? { value: t }
+      };
+      e.onChange?.(w);
+    }
+  }), { form: h, fieldName: g, onChange: N } = e;
+  I(() => {
+    if (typeof r != "string" || i === void 0 || r.length <= i) return;
+    const t = r.slice(0, i);
+    h && g ? h.setFieldValue(g, t) : N?.({
+      nativeEvent: new Event("input"),
+      target: { value: t },
+      currentTarget: { value: t }
+    });
+  }, [r, i, h, g, N]);
+  const k = b ? {
+    value: l.value,
+    onChange: l.onChange,
+    onCompositionStart: l.onCompositionStart,
+    onCompositionEnd: l.onCompositionEnd
+  } : {
+    value: m,
+    onChange: o.onChange ?? e.onChange,
+    onCompositionStart: void 0,
+    onCompositionEnd: void 0
+  }, p = b ? L(l.value).length : L(m).length, E = !!e.maxLength && V, [, D] = J((t) => t + 1, 0), C = B(void 0);
+  return I(() => {
+    if (!a) return;
+    const t = v.current;
+    if (!t || typeof ResizeObserver > "u") return;
+    const u = new ResizeObserver((w) => {
+      const R = w[0]?.contentRect.width;
+      R != null && (C.current !== void 0 && Math.abs(R - C.current) < 0.5 || (C.current = R, D()));
+    });
+    return u.observe(t), () => u.disconnect();
+  }, [a]), /* @__PURE__ */ F(
+    U,
+    {
+      ...d,
+      className: c(
+        n.fullWidth,
+        s && n.fillColumn,
+        d.className
+      ),
+      id: f,
+      children: /* @__PURE__ */ y("div", { className: c(n.counterBox, s && n.fillColumn), children: [
+        /* @__PURE__ */ F(
+          q,
+          {
+            ref: O,
+            id: f,
+            error: d.error,
+            rows: a ? void 0 : x,
+            autosize: a,
+            minRows: a ? W ?? x : void 0,
+            maxRows: j,
+            classNames: {
+              root: c(s && n.fillColumn),
+              wrapper: c(s && n.fillColumn),
+              input: c(
+                n.areaBox,
+                P === "sm" && n.radiusSm,
+                E && n.withCounter,
+                s && n.fillInput,
+                e.classNames?.input
+              )
+            },
+            placeholder: e.placeholder,
+            maxLength: e.maxLength,
+            resize: z,
+            disabled: T,
+            ...o,
+            ...k,
+            onFocus: e.onFocus ?? o.onFocus,
+            onBlur: e.onBlur ?? o.onBlur,
+            "aria-describedby": S
+          }
+        ),
+        E && /* @__PURE__ */ y("span", { className: n.counter, children: [
+          p,
+          "/",
+          e.maxLength
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  re as TextArea
+};

package/dist/components/text-area/text-area.module.css.js

@@ -0,0 +1,22 @@
+"use client";
+const t = "_areaBox_q552y_2", o = "_radiusSm_q552y_14", n = "_withCounter_q552y_18", l = "_fullWidth_q552y_63", _ = "_counterBox_q552y_67", u = "_fillColumn_q552y_74", c = "_fillInput_q552y_81", e = "_counter_q552y_67", s = {
+  areaBox: t,
+  radiusSm: o,
+  withCounter: n,
+  fullWidth: l,
+  counterBox: _,
+  fillColumn: u,
+  fillInput: c,
+  counter: e
+};
+export {
+  t as areaBox,
+  e as counter,
+  _ as counterBox,
+  s as default,
+  u as fillColumn,
+  c as fillInput,
+  l as fullWidth,
+  o as radiusSm,
+  n as withCounter
+};

package/dist/components/text-area/text-area.types.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormProps, InputWrapProps, RefProps, RootClassNameProps } from '../../common/components.types';
+/**
+ * 多行文本输入框属性
+ */
+export interface TextAreaProps extends Omit<InputWrapProps, 'borderRadius'>, FormProps, RootClassNameProps, RefProps<HTMLTextAreaElement>, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'form'> {
+    /** 当前值（受控模式） */
+    value?: string;
+    /** 默认值（非受控模式） */
+    defaultValue?: string;
+    /** 占位符文本 */
+    placeholder?: string;
+    /** 允许输入的最大字符长度 */
+    maxLength?: number;
+    /** 是否在右下角显示字符长度计数提示，默认 true。仅在传入 maxLength 时生效 */
+    showMaxLengthTip?: boolean;
+    /** 默认显示的文本行数，默认值为 2 */
+    rows?: number;
+    /** 是否自动增高，启用时使用 minRows/maxRows 替代 rows */
+    autosize?: boolean;
+    /** 自动增高模式下的最小行数 */
+    minRows?: number;
+    /** 自动增高模式下的最大行数 */
+    maxRows?: number;
+    /** 是否禁用输入框 */
+    disabled?: boolean;
+    /** 允许调整大小的方向，同 CSS resize 属性。默认 'both' */
+    resize?: React.CSSProperties['resize'];
+    /** 自定义 class，支持覆盖 input 元素样式 */
+    classNames?: {
+        input?: string;
+    };
+    /**
+     * 是否启用中文输入法安全模式。
+     * 默认 `true`：中文输入过程中不触发 `onChange`，输入法确认后（compositionend）再提交最终值。
+     * 显式传 `false` 可恢复原生行为（每次按键都触发 onChange）。
+     */
+    imeSafe?: boolean;
+    /** 圆角大小，`'md'` = 12px，`'sm'` = 8px。默认 `'md'` */
+    borderRadius?: 'md' | 'sm';
+    /**
+     * 是否撑满父容器剩余高度。默认 `false`。
+     * 需要父级是 flex 列容器（本组件作为可伸缩的 flex 子项），常见于抽屉/弹窗里让输入框吃满剩余空间。
+     */
+    fill?: boolean;
+}

package/dist/components/text-input/index.d.ts

@@ -0,0 +1,2 @@
+export type { InputProps } from './text-input';
+export { TextInput } from './text-input';

package/dist/components/text-input/index.js

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

package/dist/components/text-input/text-input.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InnerInputProps } from '../base-input';
+/**
+ * 文本输入框组件的属性类型
+ * 继承自内部基础输入框（`InnerInputProps`），支持表单集成、清空按钮、前后缀图标等配置。
+ */
+export type InputProps = InnerInputProps;
+/**
+ * 文本输入框组件 (TextInput)
+ * 这是一个包装了基础输入框和表单项状态（Label、错误信息、必填星号等）的组件。
+ *
+ * @param props - 文本输入框的属性，详细请参考 `InputProps` (`InnerInputProps`)
+ */
+export declare function TextInput(props: Readonly<InputProps>): React.JSX.Element;

package/dist/components/text-input/text-input.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { createElement as n } from "react";
+import { useId as f } from "@mantine/hooks";
+import { useFormWrapperProps as a } from "../../common/use-form-wrapper-props.js";
+import { BaseInput as c } from "../base-input/base-input.js";
+import { getFormProps as d } from "../base-input/util.js";
+import { FormItemWrapper as p } from "../form-wrapper/form-item-wrapper.js";
+function F(r) {
+  const e = f(r.id), { wrapProps: o, rest: t, outerDescribedBy: m } = a(r, e);
+  return /* @__PURE__ */ i(p, { ...o, id: e, children: /* @__PURE__ */ n(
+    c,
+    {
+      ...t,
+      ...d(r, r.onClear),
+      key: r.form?.key(r.fieldName ?? ""),
+      id: e,
+      "aria-describedby": m
+    }
+  ) });
+}
+export {
+  F as TextInput
+};

package/dist/components/tooltip/floating-arrow.d.ts

@@ -0,0 +1,13 @@
+import { ArrowPosition, FloatingPosition } from './types';
+export interface FloatingArrowProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly arrowX?: number;
+    readonly arrowY?: number;
+    readonly arrowSize?: number;
+    readonly arrowOffset?: number;
+    readonly arrowRadius?: number;
+    readonly arrowPosition?: ArrowPosition;
+    readonly dir?: 'rtl' | 'ltr';
+    readonly ref?: React.Ref<HTMLDivElement>;
+    readonly placement: FloatingPosition;
+}
+export declare const FloatingArrow: ({ arrowX, arrowY, arrowSize, arrowOffset, arrowRadius, arrowPosition, dir, className, style, ref, placement, ...others }: FloatingArrowProps) => import("react").JSX.Element;