@wisdomgarden/torque 0.1.0

package/dist/components/base-input/subs/base-input-target.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as d } from "clsx";
+import n from "../styles/base-input.module.css.js";
+const g = ({
+  ref: r,
+  error: s,
+  hideValue: e,
+  textColor: i,
+  classNames: o,
+  renderRoot: t,
+  children: p,
+  required: u,
+  ...c
+}) => {
+  const l = d(
+    n.inputNative,
+    e && n.inputNativeHidden,
+    o?.input
+  ), a = {
+    ref: r,
+    className: l,
+    style: i ? { color: i } : void 0,
+    "aria-invalid": s ? !0 : void 0,
+    "aria-required": u,
+    ...c
+  };
+  return typeof t == "function" ? t({
+    ...a,
+    children: p
+  }) : /* @__PURE__ */ m("input", { ...a });
+};
+export {
+  g as BaseInputTarget
+};

package/dist/components/base-input/subs/base-input-wrapper.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps, LayoutElement } from '../../box';
+import { BaseInputClassNames, BaseInputProps } from '../base-input.types';
+type BaseInputWrapperProps<T extends LayoutElement = 'div'> = {
+    readonly className?: string;
+    readonly classNames?: BaseInputClassNames;
+    readonly size?: BaseInputProps['size'];
+    readonly borderRadius?: BaseInputProps['borderRadius'];
+    readonly error?: BaseInputProps['error'];
+    readonly disabled?: boolean;
+    readonly pointer?: boolean;
+    readonly inputRef?: React.RefObject<HTMLInputElement | null>;
+    readonly onClick?: React.MouseEventHandler<HTMLElement>;
+    readonly onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    readonly onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+    readonly children?: React.ReactNode;
+} & BoxProps<T>;
+export declare function BaseInputWrapper<T extends LayoutElement = 'div'>({ className, classNames, size, borderRadius, error, disabled, pointer, inputRef, onClick, onMouseEnter, onMouseLeave, children, ...reset }: BaseInputWrapperProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/base-input/subs/base-input-wrapper.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { clsx as v } from "clsx";
+import { Box as x } from "../../box/box.js";
+import B from "../styles/base-input-variables.module.css.js";
+import C from "../styles/base-input.module.css.js";
+function N({
+  className: o,
+  classNames: t,
+  size: a = "md",
+  borderRadius: e = "full",
+  error: i,
+  disabled: r,
+  pointer: s,
+  inputRef: p,
+  onClick: u,
+  onMouseEnter: m,
+  onMouseLeave: d,
+  children: n,
+  ...c
+}) {
+  return (
+    // onClick 仅用于扩大鼠标/触屏点击热区（点击视觉边框聚焦 input）。
+    /* @__PURE__ */ l(
+      x,
+      {
+        className: v(
+          B.inputVar,
+          C.inputRoot,
+          t?.wrapper,
+          o
+        ),
+        "data-size": a,
+        "data-radius": e,
+        "data-error": i ? "true" : void 0,
+        "data-disabled": r ? "true" : void 0,
+        "data-pointer": s ? "true" : void 0,
+        onMouseEnter: m,
+        onMouseLeave: d,
+        onClick: r ? void 0 : (f) => {
+          p?.current?.focus(), u?.(f);
+        },
+        ...c,
+        children: n
+      }
+    )
+  );
+}
+export {
+  N as BaseInputWrapper
+};

package/dist/components/base-input/util.d.ts

@@ -0,0 +1,8 @@
+import { FormProps } from '../../common/components.types';
+/**
+ * Get the attributes related to the form
+ * Handle automatic clear logic
+ */
+export declare function getFormProps(props: FormProps, propsOnClear?: () => void): {
+    onClear: () => void;
+};

package/dist/components/base-input/util.js

@@ -0,0 +1,16 @@
+"use client";
+function t(e, f) {
+  const m = () => {
+    f ? f() : e.form && e.fieldName && e.form.setFieldValue(e.fieldName, "");
+  };
+  let i = {};
+  return e.form && e.fieldName && (i = {
+    ...e.form?.getInputProps(e.fieldName)
+  }), {
+    ...i,
+    onClear: m
+  };
+}
+export {
+  t as getFormProps
+};

package/dist/components/bottom-drawer/bottom-drawer.d.ts

@@ -0,0 +1,6 @@
+import { BaseBottomDrawerProps } from '../_inner/drawer/base-bottom-drawer';
+export type BottomDrawerProps = BaseBottomDrawerProps;
+/**
+ * 移动端使用的底部弹出的抽屉组件
+ */
+export declare const BottomDrawer: ({ children, ...props }: BottomDrawerProps) => import("react").JSX.Element;

package/dist/components/bottom-drawer/bottom-drawer.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
+import { BaseBottomDrawer as e } from "../_inner/drawer/base-bottom-drawer.js";
+import s from "../_inner/drawer/base-bottom-drawer.module.css.js";
+const b = ({ children: t, ...o }) => /* @__PURE__ */ r(
+  e,
+  {
+    ...o,
+    bodyClassName: m(o.bodyClassName, s.bodyXPadding),
+    children: t
+  }
+);
+export {
+  b as BottomDrawer
+};

package/dist/components/bottom-drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { BottomDrawer } from './bottom-drawer';
+export type { BottomDrawerProps } from './bottom-drawer';

package/dist/components/bottom-drawer/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { BottomDrawer as r } from "./bottom-drawer.js";
+export {
+  r as BottomDrawer
+};

package/dist/components/box/box.d.ts

@@ -0,0 +1,2 @@
+import { BoxProps, LayoutElement } from './box.types';
+export declare function Box<T extends LayoutElement = 'div'>(props: BoxProps<T>): import("react").JSX.Element;

package/dist/components/box/box.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
+import n from "./box.module.css.js";
+function p(t) {
+  const {
+    component: o = "div",
+    hiddenFrom: r,
+    visibleFrom: a,
+    className: s,
+    ...e
+  } = t;
+  return /* @__PURE__ */ i(
+    o,
+    {
+      ...e,
+      ...{
+        "data-hidden-from": r,
+        "data-visible-from": a
+      },
+      className: m(n.root, s)
+    }
+  );
+}
+export {
+  p as Box
+};

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

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

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

@@ -0,0 +1,36 @@
+import { ComponentPropsWithRef } from 'react';
+/**
+ * `component` prop 支持的 HTML 标签联合类型。
+ *
+ * 仅包含常见语义标签，不支持传入 React 组件——
+ * 传入标签字符串后，TS 会通过泛型自动推导对应的原生属性和 ref 类型。
+ */
+export type LayoutElement = 'div' | 'span' | 'p' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'form' | 'fieldset' | 'ul' | 'ol' | 'li' | 'label' | 'a' | 'button' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * 断点 token，对应项目 tailwind.js 里的
+ * `xs`(576) / `sm`(768) / `md`(1200) / `lg`(1440) / `xl`(1920)。
+ */
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * 支持 `component` 动态标签渲染的基础 prop。
+ *
+ * Flex 和 Paper 的 OwnProps 都继承此接口，
+ * 共享 `component` 泛型推导能力和响应式显隐。
+ *
+ * @typeParam T - 渲染的 HTML 标签，默认 `'div'`。
+ */
+export interface LayoutBaseProps<T extends LayoutElement = 'div'> {
+    /** 渲染的 HTML 标签，TS 自动推导对应原生属性与 ref 类型。 */
+    readonly component?: T;
+    /** 在该断点及以上隐藏（`display: none`）*/
+    readonly hiddenFrom?: Breakpoint;
+    /** 在该断点以下隐藏（`display: none` */
+    readonly visibleFrom?: Breakpoint;
+}
+/**
+ * 将组件自有 prop 与对应 HTML 标签的原生属性合并。
+ *
+ * 同名冲突时自有 prop 优先（如原生 `align` 被自定义 `FlexAlign` 覆盖）。
+ */
+export type PolymorphicProps<T extends LayoutElement, OwnProps extends LayoutBaseProps<T>> = OwnProps & Omit<ComponentPropsWithRef<T>, keyof OwnProps>;
+export type BoxProps<T extends LayoutElement = 'div'> = PolymorphicProps<T, LayoutBaseProps<T>>;

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

@@ -0,0 +1,2 @@
+export * from './box';
+export * from './box.types';

package/dist/components/box/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { Box as r } from "./box.js";
+export {
+  r as Box
+};

package/dist/components/button/button.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonProps } from './button.types';
+/**
+ * 基础 Button 组件
+ *
+ * 提供了多种变体（variant）、颜色（color）、尺寸（size）和图标支持。
+ * 支持加载状态（loading）和禁用状态（disabled）。
+ * 可以通过 `renderRoot` 属性自定义渲染外层标签。
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" color="brand" leftIconName="plus">
+ *   点击操作
+ * </Button>
+ * ```
+ */
+export declare const Button: (_props: ButtonProps) => React.JSX.Element;

package/dist/components/button/button.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsxs as u, Fragment as $, jsx as a } from "react/jsx-runtime";
+import { Loader as q } from "@mantine/core";
+import { Icon as b } from "@wisdomgarden/torque-icons";
+import { clsx as e } from "clsx";
+import { Fragment as w } from "react";
+import E from "./styles/button-variables.module.css.js";
+import t from "./styles/button.module.css.js";
+const S = (g) => {
+  const {
+    children: h,
+    variant: r = "primary",
+    ghost: p = !1,
+    color: I = "brand",
+    leftIconName: s,
+    leftIconUseOriginalColor: x = !1,
+    leftIconClassName: N,
+    rightIconName: i,
+    rightIconUseOriginalColor: C = !1,
+    rightIconClassName: v,
+    size: y = "md",
+    loading: o,
+    disabled: l,
+    borderRadius: O,
+    onClick: c,
+    className: R,
+    floating: z = !1,
+    truncate: D = !1,
+    renderRoot: d,
+    "aria-disabled": F,
+    tabIndex: j,
+    type: k = "button",
+    ...B
+  } = g, n = l || o, L = O ?? (r === "text" ? "xs" : "full"), T = n ? -1 : j, U = n ? !0 : F, A = {
+    "data-disabled": n,
+    "data-loading": o,
+    "data-variant": r,
+    "data-ghost": p,
+    "data-color": I,
+    "data-size": y,
+    "data-radius": L,
+    "data-floating": z,
+    className: e(
+      "t-button",
+      E.buttonVar,
+      t.button,
+      R
+    ),
+    "aria-disabled": U,
+    tabIndex: T,
+    type: k,
+    ...B
+  }, m = /* @__PURE__ */ u($, { children: [
+    /* @__PURE__ */ a("div", { className: t.loader, children: typeof o == "boolean" && o && /* @__PURE__ */ a(q, { size: "xs" }) }),
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: e(t.content, D && t.contentTruncate),
+        children: [
+          s && /* @__PURE__ */ a(
+            b,
+            {
+              name: s,
+              useOriginalColor: x,
+              className: e(t.buttonLeftIcon, N)
+            }
+          ),
+          h,
+          i && /* @__PURE__ */ a(
+            b,
+            {
+              name: i,
+              useOriginalColor: C,
+              className: e(t.buttonRightIcon, v)
+            }
+          )
+        ]
+      }
+    )
+  ] }), f = {
+    onClick: (V) => {
+      l || o || c && c(V);
+    },
+    children: m,
+    ...A
+  };
+  return /* @__PURE__ */ a(w, { children: typeof d == "function" ? d(f) : /* @__PURE__ */ a("button", { ...f, children: m }) });
+};
+export {
+  S as Button
+};

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

@@ -0,0 +1,88 @@
+import { IconName } from '@wisdomgarden/torque-icons';
+import React, { ButtonHTMLAttributes } from 'react';
+import { ButtonSize, RefProps } from '../../common/components.types';
+export type ButtonColor = 'brand' | 'regular' | 'air' | 'secondary' | 'dangerous';
+/**
+ * 按钮组件的属性定义
+ */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, RefProps<HTMLButtonElement> {
+    /**
+     * 按钮内容
+     */
+    children?: React.ReactNode | string;
+    /**
+     * 按钮风格变体
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'light' | 'stroke' | 'dotted' | 'text';
+    /**
+     * 幽灵模式，使背景透明并反转颜色，适用于有颜色的背景上
+     * @default false
+     */
+    ghost?: boolean;
+    /**
+     * 按钮的色系
+     * @default 'brand'
+     */
+    color?: ButtonColor;
+    /**
+     * 左侧图标名称
+     */
+    leftIconName?: IconName;
+    /**
+     * 左侧图标是否使用原色
+     * @default false
+     */
+    leftIconUseOriginalColor?: boolean;
+    /**
+     * 左侧图标自定义类名
+     */
+    leftIconClassName?: string;
+    /**
+     * 右侧图标名称
+     */
+    rightIconName?: IconName;
+    /**
+     * 右侧图标是否使用原色
+     * @default false
+     */
+    rightIconUseOriginalColor?: boolean;
+    /**
+     * 右侧图标自定义类名
+     */
+    rightIconClassName?: string;
+    /**
+     * 按钮尺寸
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * 是否禁用按钮
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示加载状态
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 按钮圆角大小。未显式传入时，`variant="text"` 默认为 `'xs'`，其余变体默认为 `'full'`
+     * @default 'full'（`variant="text"` 时为 `'xs'`）
+     */
+    borderRadius?: 'full' | 'sm' | 'xs';
+    /**
+     * 是否作为悬浮按钮显示 (Floating Action Button)
+     * @default false
+     */
+    floating?: boolean;
+    /**
+     * 文字过长时截断并显示省略号
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * 自定义渲染根节点的方法，允许使用其他标签（如 a 标签、Link组件等）替换默认的 button 标签
+     */
+    renderRoot?: (props: Record<string, any>) => any;
+}

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

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export * from './button.types';

package/dist/components/button/index.js

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

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

@@ -0,0 +1,8 @@
+"use client";
+const t = "_buttonVar_xuom7_2", a = {
+  buttonVar: t
+};
+export {
+  t as buttonVar,
+  a as default
+};

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

@@ -0,0 +1,18 @@
+"use client";
+const t = "_button_180zv_2", n = "_content_180zv_39", o = "_contentTruncate_180zv_50", c = "_loader_180zv_55", e = "_buttonLeftIcon_180zv_83", _ = "_buttonRightIcon_180zv_88", u = {
+  button: t,
+  content: n,
+  contentTruncate: o,
+  loader: c,
+  buttonLeftIcon: e,
+  buttonRightIcon: _
+};
+export {
+  t as button,
+  e as buttonLeftIcon,
+  _ as buttonRightIcon,
+  n as content,
+  o as contentTruncate,
+  u as default,
+  c as loader
+};

package/dist/components/checkbox/checkbox-group.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CheckboxContextValue, CheckboxGroupProps } from './checkbox.types';
+export declare const CheckboxContext: React.Context<CheckboxContextValue | null>;
+/**
+ * 复选框组组件
+ */
+export declare const CheckboxGroup: ({ ref, ...props }: CheckboxGroupProps) => React.JSX.Element;

package/dist/components/checkbox/checkbox-group.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useId as s, useUncontrolled as y } from "@mantine/hooks";
+import { createContext as _ } from "react";
+import { useFormWrapperProps as w } from "../../common/use-form-wrapper-props.js";
+import { FormItemWrapper as F } from "../form-wrapper/form-item-wrapper.js";
+const N = _(null), z = ({ ref: u, ...e }) => {
+  const r = s(e.id), { wrapProps: i, rest: d, outerDescribedBy: h, labelId: m } = w(
+    e,
+    r
+  ), {
+    children: p,
+    value: C,
+    defaultValue: b,
+    onChange: g,
+    name: x,
+    id: P,
+    groupClassName: f,
+    ...T
+  } = d, V = s(x), [t, k] = y({
+    value: C,
+    defaultValue: b,
+    finalValue: [],
+    onChange: g
+  });
+  return /* @__PURE__ */ o(F, { ...i, id: r, children: /* @__PURE__ */ o(N, { value: {
+    name: V,
+    value: t,
+    onChange: (l) => {
+      const n = l.currentTarget.value, v = l.currentTarget.checked, c = t || [];
+      let a;
+      v ? a = [...c, n] : a = c.filter((I) => I !== n), k(a);
+    }
+  }, children: /* @__PURE__ */ o(
+    "div",
+    {
+      ref: u,
+      role: "group",
+      id: r,
+      "aria-label": e["aria-label"],
+      "aria-labelledby": m,
+      "aria-describedby": h,
+      className: f,
+      children: p
+    }
+  ) }) });
+};
+export {
+  N as CheckboxContext,
+  z as CheckboxGroup
+};

package/dist/components/checkbox/checkbox-variables.module.css.js

@@ -0,0 +1,8 @@
+"use client";
+const s = "_checkboxVars_xheqq_2", c = {
+  checkboxVars: s
+};
+export {
+  s as checkboxVars,
+  c as default
+};

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CheckboxProps } from './checkbox.types';
+/**
+ * 复选框组件
+ */
+export declare const Checkbox: {
+    (props: CheckboxProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as o, jsxs as j } from "react/jsx-runtime";
+import { useId as B } from "@mantine/hooks";
+import { clsx as c } from "clsx";
+import { use as E, useRef as F, useCallback as I, useLayoutEffect as L } from "react";
+import { CheckboxContext as O } from "./checkbox-group.js";
+import k from "./checkbox-variables.module.css.js";
+import s from "./checkbox.module.css.js";
+const P = (a) => {
+  const {
+    id: x,
+    className: d,
+    wrapperClassName: m,
+    label: u,
+    checked: C,
+    onChange: p,
+    name: N,
+    value: f,
+    indeterminate: t,
+    color: h = "brand",
+    labelClassName: g,
+    visualOnly: v = !1,
+    ...y
+  } = a, n = E(O), b = B(x), l = n ? n.value?.includes(f) ?? !1 : C, i = F(null), R = I(
+    (e) => {
+      i.current = e;
+      const r = a.ref;
+      typeof r == "function" ? r(e) : r && (r.current = e);
+    },
+    [a.ref]
+  );
+  L(() => {
+    i.current && (i.current.indeterminate = !!t);
+  }, [t, l]);
+  const w = (e) => {
+    n?.onChange(e), p?.(e);
+  }, V = n?.name ?? N;
+  return v ? /* @__PURE__ */ o(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: c(s.wrapper, m),
+      children: /* @__PURE__ */ o(
+        "span",
+        {
+          "data-color": h,
+          "data-indeterminate": t,
+          "data-visual-checked": l ? "true" : void 0,
+          "data-disabled": a.disabled ? "true" : void 0,
+          className: c(
+            d,
+            s.checkbox,
+            k.checkboxVars
+          )
+        }
+      )
+    }
+  ) : /* @__PURE__ */ j("div", { className: c(s.wrapper, m), children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ...y,
+        ref: R,
+        "data-indeterminate": t,
+        "data-color": h,
+        type: "checkbox",
+        id: b,
+        name: V,
+        value: f,
+        checked: l,
+        onChange: w,
+        className: c(d, s.checkbox, k.checkboxVars),
+        onClick: (e) => {
+          e.stopPropagation(), a.onClick?.(e);
+        }
+      }
+    ),
+    u && // eslint-disable-next-line jsx-a11y/label-has-for
+    /* @__PURE__ */ o(
+      "label",
+      {
+        htmlFor: b,
+        "data-disabled": a.disabled,
+        className: c(s.label, g),
+        children: u
+      }
+    )
+  ] });
+};
+P.displayName = "Checkbox";
+export {
+  P as Checkbox
+};