@wisdomgarden/torque 0.1.0

package/dist/components/switch/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { Switch as t } from "./switch.js";
+import { SwitchGroup as c } from "./switch-group.js";
+export {
+  t as Switch,
+  c as SwitchGroup
+};

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

@@ -0,0 +1,26 @@
+import { FormProps, InputWrapProps, RootClassNameProps } from '../../common/components.types';
+/**
+ * SwitchGroup 开关组组件
+ *
+ * 主要用于将多个 Switch 组合在一起，并提供统一的表单包裹功能（如 label, error, required 等）。
+ *
+ * @example
+ * ```tsx
+ * <SwitchGroup label="通知设置" required>
+ *   <div className="flex flex-col gap-sm">
+ *     <Switch label="邮件通知" />
+ *     <Switch label="短信通知" />
+ *   </div>
+ * </SwitchGroup>
+ * ```
+ */
+export declare const SwitchGroup: (props: SwitchGroupProps) => import("react").JSX.Element;
+/**
+ * SwitchGroup 组件属性定义
+ */
+export interface SwitchGroupProps extends RootClassNameProps, InputWrapProps, FormProps {
+    /**
+     * 开关集合，通常为多个 Switch 组件及布局容器
+     */
+    readonly children: React.ReactNode;
+}

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { useId as p } from "@mantine/hooks";
+import { useFormWrapperProps as m } from "../../common/use-form-wrapper-props.js";
+import { FormItemWrapper as c } from "../form-wrapper/form-item-wrapper.js";
+const a = (r) => {
+  const o = p(), { wrapProps: i, outerDescribedBy: t } = m(r, o);
+  return /* @__PURE__ */ e(c, { ...i, id: o, children: /* @__PURE__ */ e("div", { role: "group", "aria-describedby": t, children: r.children }) });
+};
+export {
+  a as SwitchGroup
+};

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,27 @@
+import type { SwitchProps as MSwitchProps } from '@mantine/core';
+/**
+ * Switch 组件属性定义
+ */
+export interface SwitchProps extends MSwitchProps {
+    /**
+     * 开关的外观形状
+     * - `rounded`: 圆角形状（带指示器）
+     * - `square`: 方形形状
+     * @default 'rounded'
+     */
+    readonly shape?: 'rounded' | 'square';
+}
+/**
+ * Switch 开关组件
+ *
+ * 用于在两种状态之间切换。封装自 Mantine 的 Switch，并添加了自定义外观。
+ *
+ * @example
+ * ```tsx
+ * <Switch label="开启通知" shape="rounded" />
+ * ```
+ */
+export declare const Switch: {
+    ({ shape, className, ...props }: SwitchProps): import("react").JSX.Element;
+    Group: (props: import("./switch-group").SwitchGroupProps) => import("react").JSX.Element;
+};

package/dist/components/switch/switch.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { Switch as m } from "@mantine/core";
+import { clsx as c } from "clsx";
+import { SwitchGroup as s } from "./switch-group.js";
+import e from "./switch.module.css.js";
+const p = ({
+  shape: r = "rounded",
+  className: t,
+  ...o
+}) => /* @__PURE__ */ i(
+  m,
+  {
+    ...o,
+    withThumbIndicator: r === "rounded",
+    "t-shape": r,
+    className: c(e.switch, t)
+  }
+);
+p.Group = s;
+export {
+  p as Switch
+};

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

@@ -0,0 +1,7 @@
+"use client";
+const s = {
+  switch: "_switch_23of7_2"
+};
+export {
+  s as default
+};

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

@@ -0,0 +1,7 @@
+export { Tabs } from './tabs';
+export { TabsTab } from './subs/tabs-tab';
+export { TabsPanel } from './subs/tabs-panel';
+export { TabsList } from './subs/tabs-list';
+export { TabsLinkTab } from './subs/tabs-link-tab';
+export type { TabsLinkTabProps } from './subs/tabs-link-tab';
+export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabsVariant, TabsLayout, TabValue, } from './tabs.types';

package/dist/components/tab/index.js

@@ -0,0 +1,13 @@
+"use client";
+import { Tabs as a } from "./tabs.js";
+import { TabsTab as b } from "./subs/tabs-tab.js";
+import { TabsPanel as t } from "./subs/tabs-panel.js";
+import { TabsList as f } from "./subs/tabs-list.js";
+import { TabsLinkTab as p } from "./subs/tabs-link-tab.js";
+export {
+  a as Tabs,
+  p as TabsLinkTab,
+  f as TabsList,
+  t as TabsPanel,
+  b as TabsTab
+};

package/dist/components/tab/styles/tabs-variables.module.css.js

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

package/dist/components/tab/styles/tabs.module.css.js

@@ -0,0 +1,22 @@
+"use client";
+const t = "_tabs_1y0n6_2", n = "_tabList_1y0n6_5", a = "_tab_1y0n6_2", o = "_tabTruncate_1y0n6_70", s = "_tabContent_1y0n6_78", _ = "_tabPanel_1y0n6_93", e = "_scrollAreaRoot_1y0n6_96", c = "_scrollAreaContent_1y0n6_100", b = {
+  tabs: t,
+  tabList: n,
+  tab: a,
+  tabTruncate: o,
+  tabContent: s,
+  tabPanel: _,
+  scrollAreaRoot: e,
+  scrollAreaContent: c
+};
+export {
+  b as default,
+  c as scrollAreaContent,
+  e as scrollAreaRoot,
+  a as tab,
+  s as tabContent,
+  n as tabList,
+  _ as tabPanel,
+  o as tabTruncate,
+  t as tabs
+};

package/dist/components/tab/subs/tabs-link-tab.d.ts

@@ -0,0 +1,10 @@
+import { TabProps } from '../tabs.types';
+export type TabsLinkTabProps = TabProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    readonly href: string;
+};
+/**
+ * 链接语义的页签。
+ *
+ * 根元素取自 `UiProvider` 的 `linkComponent`；未配置时为原生 `<a>`。
+ */
+export declare const TabsLinkTab: (props: TabsLinkTabProps) => import("react").JSX.Element;

package/dist/components/tab/subs/tabs-link-tab.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useUiLink as l } from "../../../provider/hooks.js";
+import { TabsTab as b } from "./tabs-tab.js";
+const k = (n) => {
+  const r = l("Tabs.LinkTab"), { href: t, ...a } = n;
+  return /* @__PURE__ */ i(
+    b,
+    {
+      ...a,
+      isLink: !0,
+      renderRoot: ({ disabled: s, type: c, ...e }) => s ? /* @__PURE__ */ i(
+        "a",
+        {
+          ...e,
+          "aria-disabled": !0,
+          href: void 0,
+          tabIndex: -1,
+          onClick: (d) => d.preventDefault(),
+          children: e.children
+        }
+      ) : /* @__PURE__ */ i(r, { ...e, href: t, children: e.children })
+    }
+  );
+};
+export {
+  k as TabsLinkTab
+};

package/dist/components/tab/subs/tabs-list.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TabListProps } from '../tabs.types';
+export declare const TabsList: {
+    ({ children, ref, scrollRootClassName, scrollbarType, ...props }: TabListProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/tab/subs/tabs-list.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { ScrollArea as g } from "@mantine/core";
+import { useMergedRef as y } from "@mantine/hooks";
+import { clsx as n } from "clsx";
+import { useRef as A } from "react";
+import o from "../styles/tabs.module.css.js";
+import { useTabsContext as x } from "../tabs-context.js";
+import { useTabsDataProps as L } from "../use-tabs-data-props.js";
+import { useTabsKeyboardNavigation as N } from "../use-tabs-keyboard-navigation.js";
+const R = ({
+  children: i,
+  ref: l,
+  scrollRootClassName: c,
+  scrollbarType: m,
+  ...e
+}) => {
+  const t = x(), s = A(null), f = y(s, l), { handleKeyDown: p } = N({
+    listRef: s,
+    activateOnFocus: t.segmented
+  }), d = {
+    ...L(t)
+  }, u = {
+    "aria-orientation": "horizontal",
+    role: "tablist"
+  }, b = {
+    role: "radiogroup"
+  }, r = (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: f,
+        ...t.segmented ? b : u,
+        onKeyDown: p,
+        ...e,
+        ...d,
+        className: n(e.className, o.tabList),
+        children: i
+      }
+    )
+  );
+  return t.overflow == "scroll" ? /* @__PURE__ */ a(
+    g,
+    {
+      scrollbars: "x",
+      type: m,
+      classNames: {
+        root: n(o.scrollAreaRoot, c),
+        content: o.scrollAreaContent
+      },
+      children: r
+    }
+  ) : r;
+};
+R.displayName = "Tabs.List";
+export {
+  R as TabsList
+};

package/dist/components/tab/subs/tabs-panel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TabPanelProps } from '../tabs.types';
+export declare const TabsPanel: {
+    ({ value, children, ref, ...props }: TabPanelProps): React.JSX.Element | null;
+    displayName: string;
+};

package/dist/components/tab/subs/tabs-panel.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as b } from "clsx";
+import p from "../styles/tabs.module.css.js";
+import { useTabsContext as o } from "../tabs-context.js";
+import { useTabsDataProps as u } from "../use-tabs-data-props.js";
+const x = ({
+  value: e,
+  children: l,
+  ref: r,
+  ...t
+}) => {
+  const a = o(), { value: i, idPrefix: n } = o(), s = i === e, d = {
+    ...u(a)
+  };
+  if (!s && !a.keepMounted)
+    return null;
+  const c = a.segmented ? {} : {
+    role: "tabpanel",
+    "aria-labelledby": `${n}-tab-${e}`,
+    tabIndex: t.tabIndex ?? (s ? 0 : void 0)
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      ...c,
+      id: `${n}-panel-${e}`,
+      hidden: !s,
+      ...t,
+      ...d,
+      className: b(t.className, p.tabPanel),
+      children: l
+    }
+  );
+};
+x.displayName = "Tabs.Panel";
+export {
+  x as TabsPanel
+};

package/dist/components/tab/subs/tabs-tab.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TabProps } from '../tabs.types';
+export declare const TabsTab: {
+    ({ value, children, disabled, onClick, ref, renderRoot, isLink, ...props }: TabProps): 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;
+    displayName: string;
+};

package/dist/components/tab/subs/tabs-tab.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as u } from "clsx";
+import { Tooltip as y } from "../../tooltip/index.js";
+import c from "../styles/tabs.module.css.js";
+import { useTabsContext as g } from "../tabs-context.js";
+import { useTabsDataProps as w } from "../use-tabs-data-props.js";
+const V = ({
+  value: t,
+  children: o,
+  disabled: n,
+  onClick: T,
+  ref: f,
+  renderRoot: r,
+  isLink: x,
+  ...l
+}) => {
+  const a = g(), { value: C, onChange: h, idPrefix: i } = a, e = C === t, N = (k) => {
+    n || h(t), T?.(k);
+  }, P = {
+    ...w(a),
+    "data-selected": e,
+    "data-disabled": n
+  }, $ = a.segmented ? {
+    role: "radio",
+    "aria-checked": e
+  } : {
+    role: "tab",
+    "aria-selected": e,
+    ...x ? {} : { "aria-controls": `${i}-panel-${t}` }
+  }, m = {
+    ref: f,
+    id: `${i}-tab-${t}`,
+    disabled: n,
+    tabIndex: e ? 0 : -1,
+    onClick: N,
+    ...l,
+    ...P,
+    ...$,
+    className: u(
+      l.className,
+      c.tab
+    )
+  }, b = a.overflow === "truncate", d = u(c.tabContent, {
+    [c.tabTruncate]: b
+  }), p = b ? /* @__PURE__ */ s(y, { label: o, showOnlyWhenTruncated: !0, children: /* @__PURE__ */ s("span", { className: d, children: o }) }) : /* @__PURE__ */ s("span", { className: d, children: o });
+  return r ? r({ ...m, children: p }) : /* @__PURE__ */ s("button", { ...m, children: p });
+};
+V.displayName = "Tabs.TabsTab";
+export {
+  V as TabsTab
+};

package/dist/components/tab/tabs-context.d.ts

@@ -0,0 +1,3 @@
+import type { TabsContextValue } from './tabs.types';
+export declare const TabsContext: import("react").Context<TabsContextValue | null>;
+export declare function useTabsContext(): TabsContextValue;

package/dist/components/tab/tabs-context.js

@@ -0,0 +1,13 @@
+"use client";
+import { useContext as e, createContext as n } from "react";
+const o = n(null);
+function s() {
+  const t = e(o);
+  if (!t)
+    throw new Error("Tabs components must be used within a <Tabs> provider");
+  return t;
+}
+export {
+  o as TabsContext,
+  s as useTabsContext
+};

package/dist/components/tab/tabs.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { TabsProps } from './tabs.types';
+export declare const Tabs: {
+    (props: TabsProps): React.JSX.Element;
+    displayName: string;
+} & {
+    List: {
+        ({ children, ref, scrollRootClassName, scrollbarType, ...props }: import("./tabs.types").TabListProps): React.JSX.Element;
+        displayName: string;
+    };
+    Tab: {
+        ({ value, children, disabled, onClick, ref, renderRoot, isLink, ...props }: import("./tabs.types").TabProps): 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;
+        displayName: string;
+    };
+    LinkTab: (props: import(".").TabsLinkTabProps) => React.JSX.Element;
+    Panel: {
+        ({ value, children, ref, ...props }: import("./tabs.types").TabPanelProps): React.JSX.Element | null;
+        displayName: string;
+    };
+};

package/dist/components/tab/tabs.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as b } from "react/jsx-runtime";
+import { useUncontrolled as L } from "@mantine/hooks";
+import { clsx as P } from "clsx";
+import { useId as k, useMemo as y } from "react";
+import N from "./styles/tabs-variables.module.css.js";
+import j from "./styles/tabs.module.css.js";
+import { TabsLinkTab as w } from "./subs/tabs-link-tab.js";
+import { TabsList as I } from "./subs/tabs-list.js";
+import { TabsPanel as M } from "./subs/tabs-panel.js";
+import { TabsTab as z } from "./subs/tabs-tab.js";
+import { TabsContext as O } from "./tabs-context.js";
+const u = (e) => {
+  const {
+    value: p,
+    defaultValue: T,
+    onChange: v,
+    children: h,
+    id: a,
+    ref: g,
+    variant: o = "underline",
+    layout: s = "separated",
+    bgType: r = "white",
+    size: t = "md",
+    overflow: n = "scroll",
+    keepMounted: l = !1,
+    segmented: i = !1,
+    color: m = "brand",
+    ...x
+  } = e, [c, d] = L({
+    value: p,
+    defaultValue: T,
+    finalValue: "",
+    onChange: v
+  }), C = k(), f = a || C, V = y(
+    () => ({
+      value: c,
+      onChange: d,
+      idPrefix: f,
+      variant: o,
+      layout: s,
+      bgType: r,
+      size: t,
+      overflow: n,
+      keepMounted: l,
+      segmented: i,
+      color: m
+    }),
+    [
+      c,
+      d,
+      f,
+      o,
+      s,
+      r,
+      t,
+      n,
+      l,
+      i,
+      m
+    ]
+  );
+  return /* @__PURE__ */ b(O.Provider, { value: V, children: /* @__PURE__ */ b(
+    "div",
+    {
+      ref: g,
+      id: a,
+      ...x,
+      className: P(e.className, j.tabs, N.tabVars),
+      children: h
+    }
+  ) });
+};
+u.displayName = "Tabs";
+const K = Object.assign(u, {
+  List: I,
+  Tab: z,
+  LinkTab: w,
+  Panel: M
+});
+export {
+  K as Tabs
+};

package/dist/components/tab/tabs.types.d.ts

@@ -0,0 +1,107 @@
+import React, { ReactNode } from 'react';
+import { TabSize } from '../../common/components.types';
+export type TabValue = string | null;
+export type TabsVariant = 'outline' | 'filled' | 'underline';
+export type TabsLayout = 'separated' | 'contained';
+export interface BaseTabsProps {
+    /**
+     * TabsTab 选中时的高亮风格
+     * - 'outline': 胶囊形状选中时带主题色边框和浅色背景
+     * - 'filled': 胶囊形状选中时为纯主题色实底白字
+     * - 'underline': 选中时为文字加底部短下划线
+     * @default 'underline'
+     */
+    variant?: TabsVariant;
+    /**
+     * Tabs 列表的外层容器包裹形式 (决定了 TabsList 和 TabsTab 之间的间距和底色关系)
+     * - 'separated': 散列式。每个 TabsTab 是独立的胶囊，之间有 gap。
+     * - 'contained': 包含式。所有 TabsTab 紧凑地挤在一个带圆角和 padding 的长条背景框内。(替代之前的 segmented)
+     * @default 'separated'
+     */
+    layout?: TabsLayout;
+    /**
+     * 胶囊形状未选中状态或容器的背景色，适配灰色和白色外部背景
+     * - 'gray': 偏灰色的底色
+     * - 'white': 纯白色的底色
+     * @default 'white'
+     */
+    bgType?: 'gray' | 'white';
+    /**
+     * 尺寸大小
+     * @default 'md'
+     */
+    size?: TabSize;
+    /**
+     * 当标签过多时的溢出处理方式，
+     *  'scroll' 允许滚动，
+     *  'truncate' 挤压截断，
+     *  'wrap' 单行放不下时换行，行间距同 TabsList 的 gap，
+     * @default 'scroll'
+     */
+    overflow?: 'scroll' | 'truncate' | 'wrap';
+    /**
+     * 是否在未选中时保持挂载到 DOM 中
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * 是否为分段控制器（没有TabPanel）
+     * @default false
+     */
+    segmented?: boolean;
+    /**
+     * 选中态强调色（filled 变体的药丸底色、underline 变体的下划线颜色生效）
+     * - 'brand': 品牌主题色
+     * - 'air': AI 功能 air 蓝
+     * @default 'brand'
+     */
+    color?: 'brand' | 'air';
+}
+export interface TabsContextValue extends BaseTabsProps {
+    value: TabValue;
+    onChange: (value: TabValue) => void;
+    idPrefix: string;
+}
+export interface TabsProps extends Omit<React.ComponentProps<'div'>, 'onChange' | 'value' | 'defaultValue' | 'color'>, BaseTabsProps {
+    /**
+     * 选中的 tab 值 (受控)
+     */
+    value?: TabValue;
+    /**
+     * 默认选中的 tab 值 (非受控)
+     */
+    defaultValue?: TabValue;
+    /**
+     * 切换 tab 时的回调
+     */
+    onChange?: (value: TabValue) => void;
+    children: ReactNode;
+}
+export interface TabListProps extends React.ComponentProps<'div'> {
+    /**
+     * TabList 滚动模式下跟元素的样式
+     */
+    scrollRootClassName?: string;
+    /**
+     * 滚动模式下横向滚动条的显示策略（透传给内部 ScrollArea 的 `type`）。
+     * 不传时保持默认 `'auto'`（随系统滚动条偏好显示/隐藏）；传 `'never'`
+     * 可让该 TabList 始终不显示滚动条，仍可横向滑动。
+     */
+    scrollbarType?: 'hover' | 'scroll' | 'auto' | 'always' | 'never';
+}
+export interface TabProps extends Omit<React.ComponentProps<'button'>, 'value'> {
+    value: TabValue;
+    /**
+     * 在客户端组件可以自定义渲染根元素
+     */
+    renderRoot?: (props: any) => React.ReactNode;
+    /**
+     * 是否为路由跳转式 tab（由 TabsLinkTab 内部传入）。
+     * 此类 tab 通过路由切换内容，当前页面不存在对应的 TabsPanel，
+     * 因此不应渲染 aria-controls（避免指向不存在的元素 ID）。
+     */
+    isLink?: boolean;
+}
+export interface TabPanelProps extends React.ComponentProps<'div'> {
+    value: TabValue;
+}

package/dist/components/tab/use-tabs-data-props.d.ts

@@ -0,0 +1,9 @@
+import { BaseTabsProps } from './tabs.types';
+export declare const useTabsDataProps: (props: BaseTabsProps) => {
+    'data-variant': import("./tabs.types").TabsVariant | undefined;
+    'data-size': import("../..").SimpleComponentSizeBase | undefined;
+    'data-layout': import("./tabs.types").TabsLayout | undefined;
+    'data-bg-type': "white" | "gray" | undefined;
+    'data-overflow': "scroll" | "truncate" | "wrap" | undefined;
+    'data-color': "brand" | "air" | undefined;
+};

package/dist/components/tab/use-tabs-data-props.js

@@ -0,0 +1,12 @@
+"use client";
+const t = (a) => ({
+  "data-variant": a.variant,
+  "data-size": a.size,
+  "data-layout": a.layout,
+  "data-bg-type": a.bgType,
+  "data-overflow": a.overflow,
+  "data-color": a.color
+});
+export {
+  t as useTabsDataProps
+};

package/dist/components/tab/use-tabs-keyboard-navigation.d.ts

@@ -0,0 +1,13 @@
+import { KeyboardEvent } from 'react';
+interface UseTabsKeyboardNavigationProps {
+    listRef: React.RefObject<HTMLDivElement | null>;
+    activateOnFocus?: boolean;
+    loop?: boolean;
+}
+/**
+ * Tabs的无障碍键盘交互处理
+ */
+export declare function useTabsKeyboardNavigation({ listRef, activateOnFocus, loop, }: UseTabsKeyboardNavigationProps): {
+    handleKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+};
+export {};