@wisdomgarden/torque 0.1.0

package/dist/components/form-wrapper/form-item-wrapper-defaults-context.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { FormItemWrapperProps } from './form-wrapper.types';
+type FormItemWrapperDefaults = Pick<FormItemWrapperProps, 'labelClassName' | 'labelWidth' | 'layout'>;
+interface FormItemWrapperDefaultsProviderProps {
+    children: ReactNode;
+    value: FormItemWrapperDefaults;
+}
+export declare function FormItemWrapperDefaultsProvider({ children, value, }: Readonly<FormItemWrapperDefaultsProviderProps>): import("react").JSX.Element;
+export declare function useFormItemWrapperDefaults(): FormItemWrapperDefaults;
+export {};

package/dist/components/form-wrapper/form-item-wrapper-defaults-context.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as n, createContext as m } from "react";
+const e = m(
+  {}
+);
+function s({
+  children: r,
+  value: t
+}) {
+  return /* @__PURE__ */ o(e.Provider, { value: t, children: r });
+}
+function a() {
+  return n(e);
+}
+export {
+  s as FormItemWrapperDefaultsProvider,
+  a as useFormItemWrapperDefaults
+};

package/dist/components/form-wrapper/form-item-wrapper.d.ts

@@ -0,0 +1,5 @@
+import { FormItemWrapperProps } from './form-wrapper.types';
+/**
+ * Form表单组件的包装器，组件库外部一般不需要直接使用
+ */
+export declare function FormItemWrapper(props: Readonly<FormItemWrapperProps>): import("react").JSX.Element;

package/dist/components/form-wrapper/form-item-wrapper.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { clsx as o } from "clsx";
+import { Flex as E } from "../flex/flex.js";
+import { Group as G } from "../group/group.js";
+import { Stack as T } from "../stack/stack.js";
+import { Text as m } from "../text/text.js";
+import { useFormItemWrapperDefaults as q } from "./form-item-wrapper-defaults-context.js";
+import e from "./form-item-wrapper.module.css.js";
+function M(v) {
+  const n = q(), {
+    label: a,
+    children: f,
+    error: t,
+    description: s,
+    withAsterisk: I,
+    required: x,
+    layout: W,
+    labelWidth: y,
+    keepAsteriskWidth: P = !1,
+    borderRadius: d = "full",
+    id: r,
+    errorId: k,
+    descriptionId: g,
+    labelId: C,
+    labelClassName: w,
+    errorClassName: z,
+    labelWrapperStyle: F,
+    ...u
+  } = v, c = W ?? n.layout ?? "vertical", S = y ?? n.labelWidth ?? "var(--t-form-item-label-width, 72px)", $ = w ?? n.labelClassName, j = k ?? (r && t && typeof t == "string" ? `${r}-error` : void 0), A = g ?? (r && s ? `${r}-description` : void 0), D = C ?? (r && a ? `${r}-label` : void 0), b = () => {
+    if (!a) return null;
+    let p = null;
+    return x || I ? p = /* @__PURE__ */ l(m, { component: "span", className: e.asterisk, children: "*" }) : P && (p = /* @__PURE__ */ l("div", { className: e.asteriskPlaceholder })), /* @__PURE__ */ i(
+      G,
+      {
+        gap: "mini",
+        wrap: "nowrap",
+        className: o({
+          [e.labelGroupOffset]: d == "full" && c === "vertical"
+        }),
+        children: [
+          p,
+          /* @__PURE__ */ l(
+            "label",
+            {
+              id: D,
+              className: o(
+                e.label,
+                { [e.labelVertical]: c === "vertical" },
+                $
+              ),
+              htmlFor: r,
+              children: a
+            }
+          )
+        ]
+      }
+    );
+  }, h = () => s ? /* @__PURE__ */ l(
+    m,
+    {
+      size: "sm",
+      id: A,
+      className: o(e.description, {
+        [e.offset]: d == "full"
+      }),
+      children: s
+    }
+  ) : null, N = () => !t || typeof t == "boolean" ? null : /* @__PURE__ */ l(
+    m,
+    {
+      size: "sm",
+      id: j,
+      className: o(
+        e.error,
+        { [e.offset]: d == "full" },
+        z
+      ),
+      children: t
+    }
+  );
+  return c === "vertical" ? /* @__PURE__ */ i(T, { gap: "xs", ...u, children: [
+    b(),
+    f,
+    h(),
+    N()
+  ] }) : /* @__PURE__ */ i(E, { align: "flex-start", gap: "md", ...u, children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        style: {
+          width: a ? S : 0,
+          maxWidth: "7rem",
+          paddingTop: 5,
+          ...F
+        },
+        className: e.labelWrapper,
+        children: b()
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: e.horizontalContent, children: [
+      f,
+      (t || s) && /* @__PURE__ */ l("div", { className: e.horizontalSpacer }),
+      N(),
+      h()
+    ] })
+  ] });
+}
+export {
+  M as FormItemWrapper
+};

package/dist/components/form-wrapper/form-item-wrapper.module.css.js

@@ -0,0 +1,28 @@
+"use client";
+const e = "_asterisk_6xkkf_2", t = "_asteriskPlaceholder_6xkkf_11", o = "_labelGroupOffset_6xkkf_16", r = "_label_6xkkf_16", l = "_labelVertical_6xkkf_26", a = "_description_6xkkf_30", s = "_error_6xkkf_34", _ = "_offset_6xkkf_38", k = "_labelWrapper_6xkkf_42", n = "_horizontalContent_6xkkf_46", c = "_horizontalSpacer_6xkkf_54", f = {
+  asterisk: e,
+  asteriskPlaceholder: t,
+  labelGroupOffset: o,
+  label: r,
+  labelVertical: l,
+  description: a,
+  error: s,
+  offset: _,
+  labelWrapper: k,
+  horizontalContent: n,
+  horizontalSpacer: c
+};
+export {
+  e as asterisk,
+  t as asteriskPlaceholder,
+  f as default,
+  a as description,
+  s as error,
+  n as horizontalContent,
+  c as horizontalSpacer,
+  r as label,
+  o as labelGroupOffset,
+  l as labelVertical,
+  k as labelWrapper,
+  _ as offset
+};

package/dist/components/form-wrapper/form-wrapper.types.d.ts

@@ -0,0 +1,15 @@
+import { InputWrapProps, RootClassNameProps } from '../../common/components.types';
+export interface FormItemWrapperProps extends RootClassNameProps, InputWrapProps {
+    /** 表单项的内容 */
+    children: React.ReactNode;
+    /** 表单项的边框圆角,如果是full，label会有4px的缩进 */
+    borderRadius?: 'full' | 'sm';
+    /** 静态id，默认是随机生成 */
+    id?: string;
+    /** 错误提示节点的 id，外部传入时优先使用，未传入时根据 id + error 自行派生 */
+    errorId?: string;
+    /** 描述节点的 id，外部传入时优先使用，未传入时根据 id + description 自行派生 */
+    descriptionId?: string;
+    /** 标签节点的 id，外部传入时优先使用，未传入时根据 id + label 自行派生 */
+    labelId?: string;
+}

package/dist/components/form-wrapper/index.d.ts

@@ -0,0 +1,3 @@
+export { FormItemWrapper } from './form-item-wrapper';
+export { FormItemWrapperDefaultsProvider, useFormItemWrapperDefaults, } from './form-item-wrapper-defaults-context';
+export type { FormItemWrapperProps } from './form-wrapper.types';

package/dist/components/form-wrapper/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { FormItemWrapper as m } from "./form-item-wrapper.js";
+import { FormItemWrapperDefaultsProvider as p, useFormItemWrapperDefaults as t } from "./form-item-wrapper-defaults-context.js";
+export {
+  m as FormItemWrapper,
+  p as FormItemWrapperDefaultsProvider,
+  t as useFormItemWrapperDefaults
+};

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

@@ -0,0 +1,8 @@
+import { LayoutElement } from '../box/box.types';
+import type { GroupProps } from '../flex/layout.types';
+/**
+ * 水平排列容器。默认垂直居中、自动换行、`md` 间距。
+ *
+ * `grow` 模式下子元素均分剩余空间，`preventGrowOverflow` 防止内容撑爆。
+ */
+export declare function Group<T extends LayoutElement = 'div'>(props: GroupProps<T>): import("react").JSX.Element;

package/dist/components/group/group.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { clsx as i } from "clsx";
+import { Flex as c } from "../flex/flex.js";
+import w from "./group.module.css.js";
+function v(t) {
+  const {
+    align: o = "center",
+    justify: e = "flex-start",
+    gap: a = "md",
+    wrap: s = "wrap",
+    grow: r = !1,
+    preventGrowOverflow: l = !0,
+    className: m,
+    ...n
+  } = t, p = {
+    ...r && { "data-grow": !0 },
+    ...r && l && { "data-prevent-grow-overflow": !0 }
+  };
+  return /* @__PURE__ */ f(
+    c,
+    {
+      direction: "row",
+      align: o,
+      justify: e,
+      gap: a,
+      wrap: s,
+      className: i(r && w.root, m),
+      ...p,
+      ...n
+    }
+  );
+}
+export {
+  v as Group
+};

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

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

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

@@ -0,0 +1 @@
+export { Group } from './group';

package/dist/components/group/index.js

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

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

@@ -0,0 +1,20 @@
+import type { IconButtonProps } from './icon-button.types';
+/**
+ * 图标按钮组件 (IconButton)
+ *
+ * 专用于只包含图标、没有文字的按钮场景。基于基础 `Button` 组件封装，
+ * 支持与基础按钮相同的多种样式（变体、颜色、大小、圆角）和状态（加载中、禁用）。
+ *
+ * ⚠️ 注意：为了保证无障碍访问 (a11y)，使用时务必提供 `aria-label` 或 `title` 属性。
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   iconName="close"
+ *   aria-label="关闭弹窗"
+ *   variant="light"
+ *   onClick={onClose}
+ * />
+ * ```
+ */
+export declare const IconButton: (props: IconButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { Icon as e } from "@wisdomgarden/torque-icons";
+import { clsx as a } from "clsx";
+import { Button as i } from "../button/button.js";
+import l from "./icon-button.module.css.js";
+const B = (r) => {
+  const { iconName: s, iconClassName: t, useOriginalColor: m, className: n, ...c } = r;
+  return /* @__PURE__ */ o(i, { ...c, className: a(l.iconButton, n), children: /* @__PURE__ */ o(
+    e,
+    {
+      name: s,
+      className: t,
+      useOriginalColor: m
+    }
+  ) });
+};
+export {
+  B as IconButton
+};

package/dist/components/icon-button/icon-button.module.css.js

@@ -0,0 +1,8 @@
+"use client";
+const t = "_iconButton_1wlzh_2", n = {
+  iconButton: t
+};
+export {
+  n as default,
+  t as iconButton
+};

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

@@ -0,0 +1,7 @@
+import type { ButtonProps } from '../button';
+import type { IconName } from '@wisdomgarden/torque-icons';
+export type IconButtonProps = Omit<ButtonProps, 'leftIconName' | 'rightIconName' | 'children' | 'leftIconUseOriginalColor' | 'rightIconUseOriginalColor' | 'leftIconClassName' | 'rightIconClassName'> & {
+    iconName: IconName;
+    iconClassName?: string;
+    useOriginalColor?: boolean;
+};

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

@@ -0,0 +1,2 @@
+export * from './icon-button';
+export type * from './icon-button.types';

package/dist/components/icon-button/index.js

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

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

@@ -0,0 +1 @@
+export * from './link-button';

package/dist/components/link-button/index.js

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

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

@@ -0,0 +1,31 @@
+import type { ButtonProps } from '../button';
+export type LinkButtonProps = Omit<ButtonProps, 'renderRoot' | 'type'> & {
+    /** 跳转的链接地址 */
+    readonly href: string;
+    /** 是否在新标签页中打开链接 */
+    readonly newTab?: boolean;
+    /**
+     * 当值为 true 时，会注入 `rel="noopener noreferrer"` 属性，
+     * 否则为 undefined。建议外部链接开启以保证安全性。
+     */
+    readonly safe?: boolean;
+};
+/**
+ * 链接按钮组件 (LinkButton)
+ *
+ * 外观与普通 `Button` 完全一致，但渲染为链接语义。
+ * 适用于需要提供按钮样式，但语义上是一个导航链接的场景，有利于 SEO 和无障碍访问。
+ * 根元素取自 `UiProvider` 的 `linkComponent`；未配置时为原生 `<a>`。
+ *
+ * @example
+ * ```tsx
+ * <LinkButton href="/settings" variant="light" leftIconName="settings">
+ *   前往设置
+ * </LinkButton>
+ *
+ * <LinkButton href="https://example.com" newTab safe>
+ *   外部链接
+ * </LinkButton>
+ * ```
+ */
+export declare const LinkButton: ({ children, ...props }: LinkButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useUiLink as u } from "../../provider/hooks.js";
+import { Button as f } from "../button/button.js";
+const L = ({ children: r, ...t }) => {
+  const d = u("LinkButton"), { href: l, newTab: o, safe: s, ...a } = t, i = {
+    target: o ? "_blank" : void 0,
+    rel: s ? "noopener noreferrer" : void 0,
+    href: l
+  };
+  return /* @__PURE__ */ n(
+    f,
+    {
+      ...a,
+      renderRoot: ({ disabled: b, type: h, ...e }) => e["aria-disabled"] === !0 ? /* @__PURE__ */ n(
+        "a",
+        {
+          ...e,
+          ...i,
+          href: void 0,
+          onClick: (c) => c.preventDefault(),
+          children: e.children
+        }
+      ) : /* @__PURE__ */ n(d, { ...e, ...i, children: e.children }),
+      children: r
+    }
+  );
+};
+export {
+  L as LinkButton
+};

package/dist/components/link-icon-button/index.d.ts

@@ -0,0 +1 @@
+export * from './link-icon-button';

package/dist/components/link-icon-button/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { LinkIconButton as t } from "./link-icon-button.js";
+export {
+  t as LinkIconButton
+};

package/dist/components/link-icon-button/link-icon-button.d.ts

@@ -0,0 +1,37 @@
+import type { IconButtonProps } from '../icon-button';
+export type LinkIconButtonProps = Omit<IconButtonProps, 'renderRoot' | 'type'> & {
+    /** 跳转的链接地址 */
+    readonly href: string;
+    /** 是否在新标签页中打开链接 */
+    readonly newTab?: boolean;
+    /**
+     * 当值为 true 时，会注入 `rel="noopener noreferrer"` 属性，
+     * 否则为 undefined。建议外部链接开启以保证安全性。
+     */
+    readonly safe?: boolean;
+    /**
+     * 内部路由时取代当前历史记录而非新增一笔，交由 `UiProvider` 的 `linkComponent`
+     * 处理；默认的原生 `<a>` 无法实现，会忽略它。
+     */
+    readonly replace?: boolean;
+};
+/**
+ * 链接图标按钮组件 (LinkIconButton)
+ *
+ * 外观与 `IconButton`（纯图标按钮）完全一致，但渲染为链接语义。
+ * 适用于需要提供纯图标按钮样式，但语义上是一个导航链接的场景，有利于 SEO 和无障碍访问。
+ * 根元素取自 `UiProvider` 的 `linkComponent`；未配置时为原生 `<a>`。
+ *
+ * ⚠️ 注意：为了保证无障碍访问 (a11y)，使用时务必提供 `aria-label` 或 `title` 属性。
+ *
+ * @example
+ * ```tsx
+ * <LinkIconButton
+ *   href="/settings"
+ *   iconName="settings"
+ *   aria-label="前往设置"
+ *   variant="light"
+ * />
+ * ```
+ */
+export declare const LinkIconButton: (props: LinkIconButtonProps) => import("react").JSX.Element;

package/dist/components/link-icon-button/link-icon-button.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useUiLink as u } from "../../provider/hooks.js";
+import { IconButton as f } from "../icon-button/icon-button.js";
+const L = (r) => {
+  const t = u("LinkIconButton"), { href: o, newTab: d, safe: l, replace: c, ...a } = r, i = {
+    target: d ? "_blank" : void 0,
+    rel: l ? "noopener noreferrer" : void 0,
+    href: o
+  };
+  return /* @__PURE__ */ n(
+    f,
+    {
+      ...a,
+      renderRoot: ({ disabled: b, type: h, ...e }) => e["aria-disabled"] === !0 ? /* @__PURE__ */ n(
+        "a",
+        {
+          ...e,
+          ...i,
+          href: void 0,
+          onClick: (s) => s.preventDefault(),
+          children: e.children
+        }
+      ) : /* @__PURE__ */ n(t, { ...e, ...i, replace: c, children: e.children })
+    }
+  );
+};
+export {
+  L as LinkIconButton
+};

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

@@ -0,0 +1,2 @@
+export { Menu } from './menu';
+export type { MenuItem, MenuItemOnClick, MenuProps } from './menu.types';

package/dist/components/menu/index.js

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

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { MenuProps } from './menu.types';
+/**
+ * 下拉菜单组件 (Menu)
+ *
+ * 一个响应式的下拉菜单组件。在桌面端展示为弹出的浮动菜单 (`MenuWeb`)，
+ * 在移动端自动降级展示为底部动作面板 (`MenuMobile` / Bottom Drawer)。
+ *
+ * ⚠️ 注意：触发器可以通过 `children` 传入（简单的 ReactNode），
+ * 或者通过 `renderTarget` 渲染函数传入（以便获取 `opened` 等内部状态）。两者互斥。
+ *
+ * @param props 组件的属性配置
+ *
+ * @example
+ * ```tsx
+ * // 方式一：使用 children
+ * <Menu
+ *   menuItems={[{ label: '编辑', value: 'edit' }, { label: '删除', value: 'delete', dangerous: true }]}
+ *   onClick={(_, item) => console.log(item.value)}
+ * >
+ *   <Button>操作</Button>
+ * </Menu>
+ *
+ * // 方式二：使用 renderTarget
+ * <Menu
+ *   menuItems={[{ label: '设置', value: 'settings' }]}
+ *   renderTarget={({ opened }) => (
+ *     <Button rightIconName={opened ? 'chevron-up' : 'chevron-down'}>更多</Button>
+ *   )}
+ * />
+ * ```
+ */
+export declare const Menu: (props: MenuProps) => React.JSX.Element;

package/dist/components/menu/menu.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import "../../provider/ui-context.js";
+import "react";
+import { useDeviceType as c } from "../../provider/hooks.js";
+import { MenuMobile as p } from "../_inner/menu/_mobile/menu.mobile.js";
+import { MenuWeb as l } from "../_inner/menu/_web/menu.web.js";
+const h = (e) => {
+  const { renderTarget: o, children: t, trigger: u, ...i } = e, { deviceType: n } = c(), m = n == "mobile", s = {
+    ...i,
+    children: o?.() ?? t
+  };
+  return m ? /* @__PURE__ */ r(p, { ...s }) : /* @__PURE__ */ r(l, { ...e });
+};
+export {
+  h as Menu
+};

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

@@ -0,0 +1,46 @@
+import { FloatingPosition } from '@mantine/core';
+import { BottomActionItem, BottomActionOnClick } from '../_inner/bottom-action';
+export type MenuItem = BottomActionItem;
+export type MenuItemOnClick = BottomActionOnClick;
+interface RenderTarget {
+    renderTarget: (props?: {
+        opened?: boolean;
+    }) => React.ReactNode;
+    children?: never;
+}
+interface ChildrenTarget {
+    renderTarget?: never;
+    children: React.ReactNode;
+}
+type MenuTarget = RenderTarget | ChildrenTarget;
+export type MenuProps = MenuTarget & {
+    readonly menuItems: MenuItem[];
+    readonly onClick?: MenuItemOnClick;
+    /**
+     * 移动端的时候，用于展示第一层BottomDrawer的标题 后续的展示上一级的选中结果
+     */
+    readonly title?: string;
+    /**
+     * 移动端的时候，是否居中展示标题
+     * 如果为true，将不会展示leftIcon、description、rightIcon
+     */
+    readonly labelCenter?: boolean;
+    /**
+     * 是否禁用菜单
+     */
+    readonly disabled?: boolean;
+    /**
+     * 触发器的无障碍标签
+     */
+    readonly triggerAriaLabel?: string;
+    /**
+     * 触发方式
+     */
+    readonly trigger?: 'click' | 'hover' | 'click-hover';
+    /**
+     * 桌面端下拉浮层相对触发器的对齐位置，默认沿用 Mantine Popover 的默认值
+     */
+    readonly position?: FloatingPosition;
+    readonly 'data-testid'?: string;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export { messages } from './messages';
+export type { MessageType, MessageProps } from './message.types';

package/dist/components/message/index.js

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

package/dist/components/message/message.d.ts

@@ -0,0 +1,2 @@
+import { MessageProps } from './message.types';
+export declare function showMessage(options: MessageProps): void;