@wisdomgarden/torque 0.1.0

package/dist/components/message/message.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { showNotification as a } from "@mantine/notifications";
+import { Icon as l } from "@wisdomgarden/torque-icons";
+import { useNotificationA11y as n } from "../../common/use-notification-a11y.js";
+import { Group as m } from "../group/group.js";
+import { Text as c } from "../text/text.js";
+import s from "./message.module.css.js";
+function f(e) {
+  const i = {
+    success: "success-fill",
+    info: "info-fill",
+    warning: "warning-fill-triangle",
+    error: "error-fill",
+    help: "question-fill"
+  }, r = n();
+  return /* @__PURE__ */ t(m, { className: s.message, gap: "xs", children: [
+    /* @__PURE__ */ o(
+      l,
+      {
+        name: `${i[e.type]}`,
+        className: s.messageIcon,
+        useOriginalColor: !0,
+        role: "img",
+        "aria-label": r[e.type]
+      }
+    ),
+    /* @__PURE__ */ o(c, { className: s.messageText, children: e.message })
+  ] });
+}
+function y(e) {
+  a({
+    message: /* @__PURE__ */ o(f, { ...e }),
+    autoClose: 3e3,
+    withCloseButton: !1,
+    position: "top-center",
+    classNames: { root: s.messageRoot }
+  });
+}
+export {
+  y as showMessage
+};

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

@@ -0,0 +1,14 @@
+"use client";
+const s = "_message_s55m6_2", e = "_messageIcon_s55m6_10", m = "_messageText_s55m6_14", o = "_messageRoot_s55m6_19", t = {
+  message: s,
+  messageIcon: e,
+  messageText: m,
+  messageRoot: o
+};
+export {
+  t as default,
+  s as message,
+  e as messageIcon,
+  o as messageRoot,
+  m as messageText
+};

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

@@ -0,0 +1,7 @@
+export interface MessageProps {
+    /** 消息内容文本 */
+    message: string;
+    /** 消息类型，决定图标和无障碍播报内容 */
+    type: MessageType;
+}
+export type MessageType = 'success' | 'error' | 'warning' | 'info' | 'help';

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

@@ -0,0 +1,10 @@
+/**
+ * 消息提示指令
+ */
+export declare const messages: {
+    showInfo(message: string): void;
+    showSuccess(message: string): void;
+    showError(message: string): void;
+    showWarning(message: string): void;
+    showHelp(message: string): void;
+};

package/dist/components/message/messages.js

@@ -0,0 +1,37 @@
+"use client";
+import { showMessage as e } from "./message.js";
+const r = {
+  showInfo(s) {
+    e({
+      message: s,
+      type: "info"
+    });
+  },
+  showSuccess(s) {
+    e({
+      message: s,
+      type: "success"
+    });
+  },
+  showError(s) {
+    e({
+      message: s,
+      type: "error"
+    });
+  },
+  showWarning(s) {
+    e({
+      message: s,
+      type: "warning"
+    });
+  },
+  showHelp(s) {
+    e({
+      message: s,
+      type: "help"
+    });
+  }
+};
+export {
+  r as messages
+};

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

@@ -0,0 +1,2 @@
+export { Modal } from './modal';
+export type { ModalProps } from './modal';

package/dist/components/modal/index.js

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

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,6 @@
+import { Modal as MModal } from '@mantine/core';
+export type ModalProps = Omit<Parameters<typeof MModal>[0], 'closeButtonProps'>;
+/**
+ * Pc端弹窗组件
+ */
+export declare const Modal: ({ children, withCloseButton, title, ...props }: ModalProps) => import("react").JSX.Element;

package/dist/components/modal/modal.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { Modal as d } from "@mantine/core";
+import { clsx as s } from "clsx";
+import "../../provider/ui-context.js";
+import "react";
+import { useLocale as f } from "../../provider/hooks.js";
+import { IconButton as p } from "../icon-button/icon-button.js";
+import { Text as h } from "../text/text.js";
+import a from "./modal.module.css.js";
+const n = (o, e) => o && typeof o == "object" ? o[e] : void 0, b = ({
+  children: o,
+  withCloseButton: e = !0,
+  title: r,
+  ...t
+}) => /* @__PURE__ */ c(d, { ...t, title: void 0, withCloseButton: !1, children: [
+  (r || e) && /* @__PURE__ */ i(
+    u,
+    {
+      title: r,
+      withCloseButton: e,
+      onClose: t.onClose,
+      classNames: t.classNames
+    }
+  ),
+  o
+] }), u = ({
+  title: o,
+  withCloseButton: e,
+  onClose: r,
+  classNames: t
+}) => {
+  const l = f(), m = typeof o == "string" ? h : "div";
+  return /* @__PURE__ */ c("div", { className: s(a.header, n(t, "header")), children: [
+    /* @__PURE__ */ i(m, { className: s(a.title, n(t, "title")), children: o }),
+    e && /* @__PURE__ */ i(
+      p,
+      {
+        variant: "text",
+        color: "regular",
+        size: "lg",
+        iconName: "close",
+        onClick: () => r?.(),
+        "aria-label": l.close
+      }
+    )
+  ] });
+};
+export {
+  b as Modal
+};

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

@@ -0,0 +1,10 @@
+"use client";
+const e = "_header_16ceg_2", t = "_title_16ceg_9", s = {
+  header: e,
+  title: t
+};
+export {
+  s as default,
+  e as header,
+  t as title
+};

package/dist/components/multi-select/base-multi-select.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BaseMultiSelectProps } from './multi-select.types';
+export declare const BaseMultiSelect: (props: BaseMultiSelectProps) => React.JSX.Element;

package/dist/components/multi-select/base-multi-select.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsxs as P, jsx as o } from "react/jsx-runtime";
+import { PillsInput as x } from "@mantine/core";
+import { useUncontrolled as W } from "@mantine/hooks";
+import { clsx as f } from "clsx";
+import { useState as v } from "react";
+import { useFormWrapperProps as y } from "../../common/use-form-wrapper-props.js";
+import { OptionsDropDown as I } from "../_inner/dropdown/options-drop-down.js";
+import { Combobox as c } from "../combobox/combobox.js";
+import { useCombobox as O } from "../combobox/hooks/use-combobox.js";
+import { FormItemWrapper as F } from "../form-wrapper/form-item-wrapper.js";
+import { MultiSelectInput as V } from "./multi-select-input.js";
+import l from "./styles/base-multi-select.module.css.js";
+const G = (e) => {
+  const [i, u] = v(""), [n, a] = W({
+    value: e.value,
+    defaultValue: e.defaultValue,
+    finalValue: [],
+    onChange: e.onChange
+  }), d = O({
+    onDropdownClose: () => u("")
+  }), p = (t) => {
+    a(
+      n.includes(t) ? n.filter((r) => r !== t) : [...n, t]
+    );
+  }, s = (t) => {
+    a(n.filter((r) => r !== t));
+  }, b = e.onClear ?? (() => a([])), m = e.size ?? "md", { wrapProps: h, rest: w, outerDescribedBy: C } = y(
+    e,
+    e.id
+  ), { emptyState: D, ...S } = w, g = {
+    ...S,
+    value: n,
+    onRemove: s,
+    onClear: b,
+    renderInput: (t) => /* @__PURE__ */ o(
+      x.Field,
+      {
+        ...t,
+        "data-size": m,
+        className: f(l.pillInputField, l.pillFieldFull),
+        value: i,
+        disabled: e.disabled,
+        placeholder: n.length > 0 ? void 0 : e.placeholder,
+        onChange: (r) => {
+          u(r.currentTarget.value);
+        },
+        onKeyDown: (r) => {
+          r.key === "Backspace" && i.length === 0 && n.length > 0 && (r.preventDefault(), s(n[n.length - 1])), r.defaultPrevented || t.onKeyDown?.(r);
+        }
+      }
+    ),
+    dropdownOpened: d.opened,
+    onToggleDropdown: d.toggle,
+    "aria-describedby": C
+  }, T = (t) => /* @__PURE__ */ o(V, { ...t });
+  return /* @__PURE__ */ P(
+    c,
+    {
+      store: d,
+      selectionBehavior: "keepOpen",
+      onOptionSubmit: (t) => {
+        p(String(t));
+      },
+      children: [
+        /* @__PURE__ */ o(
+          F,
+          {
+            ...h,
+            className: f(
+              h.className,
+              !e.renderTarget && (m === "sm" ? l.minWidthSm : m === "lg" ? l.minWidthLg : l.minWidthMd)
+            ),
+            id: e.id,
+            children: e.renderTarget ? /* @__PURE__ */ o(c.Target, { children: e.renderTarget(g) }) : /* @__PURE__ */ o(c.Target, { targetType: "input", children: T(g) })
+          }
+        ),
+        /* @__PURE__ */ o(
+          I,
+          {
+            multiSelect: !0,
+            options: e.options?.filter(
+              (t) => t.label.indexOf(i) !== -1
+            ),
+            value: n,
+            renderOption: e.renderOption,
+            width: e.dropDownWidth,
+            matchTargetWidth: !e.dropDownWidth,
+            withinPortal: e.withinPortal ?? !0,
+            title: e.placeholder,
+            emptyState: D
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  G as BaseMultiSelect
+};

package/dist/components/multi-select/index.d.ts

@@ -0,0 +1 @@
+export { MultiSelect } from './multi-select';

package/dist/components/multi-select/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { MultiSelect as l } from "./multi-select.js";
+export {
+  l as MultiSelect
+};

package/dist/components/multi-select/multi-select-input.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MultiSelectProps } from './multi-select.types';
+/**
+ * Implement this design from Figma.
+ * @https://www.figma.com/design/IUOhmlQ5wR7C6FZyhLhkCw/Web-2.0%E5%B9%B3%E5%8F%B0%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83?node-id=10617-41933&m=dev
+ */
+export interface MultiSelectInputProps extends Pick<MultiSelectProps, 'size' | 'value' | 'options' | 'placeholder' | 'singleLine' | 'borderRadius' | 'id' | 'error' | 'disabled' | 'clearable' | 'onClear' | 'aria-label'> {
+    readonly onRemove?: (val: string) => void;
+    readonly renderInput?: (props: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>) => React.ReactNode;
+    readonly dropdownOpened?: boolean;
+    readonly onToggleDropdown?: () => void;
+    readonly ref?: React.Ref<HTMLInputElement>;
+    readonly role?: React.AriaRole;
+    readonly onClick?: React.MouseEventHandler<HTMLElement>;
+    readonly onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    readonly onFocus?: React.FocusEventHandler<HTMLElement>;
+    readonly onBlur?: React.FocusEventHandler<HTMLElement>;
+    readonly onPointerDown?: React.PointerEventHandler<HTMLElement>;
+    readonly 'aria-expanded'?: boolean;
+    readonly 'aria-controls'?: string;
+    readonly 'aria-activedescendant'?: string;
+    readonly 'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
+    readonly 'aria-describedby'?: string;
+}
+/**
+ * MultiSelect 的触发器外观，基于 TagsInput 实现。
+ * 负责将 value[] + options[] 解析为 TagsInput 所需的 TagItem[]。
+ */
+export declare const MultiSelectInput: ({ size, value, options, onRemove, onClick, placeholder, renderInput, singleLine, borderRadius, dropdownOpened, onToggleDropdown, id, error, disabled, clearable, onClear, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ref, role, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-activedescendant": ariaActiveDescendant, "aria-haspopup": ariaHasPopup, onKeyDown, onFocus, onBlur, onPointerDown, }: MultiSelectInputProps) => React.JSX.Element;

package/dist/components/multi-select/multi-select-input.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as B } from "react/jsx-runtime";
+import { TagsInput as C } from "../_inner/tags-input/tags-input.js";
+const F = ({
+  size: e = "md",
+  value: r,
+  options: i,
+  onRemove: t,
+  onClick: n,
+  placeholder: d,
+  renderInput: l,
+  singleLine: p,
+  borderRadius: s = "full",
+  dropdownOpened: o,
+  onToggleDropdown: c,
+  id: u,
+  error: b,
+  disabled: m,
+  clearable: f,
+  onClear: x,
+  "aria-label": I,
+  "aria-describedby": g,
+  ref: h,
+  role: y,
+  "aria-expanded": j,
+  "aria-controls": v,
+  "aria-activedescendant": M,
+  "aria-haspopup": S,
+  onKeyDown: T,
+  onFocus: k,
+  onBlur: q,
+  onPointerDown: w
+}) => {
+  const z = (r ?? []).map((a) => ({
+    id: a,
+    label: i.find((A) => A.value === a)?.label ?? a
+  }));
+  return /* @__PURE__ */ B(
+    C,
+    {
+      ref: h,
+      tags: z,
+      onRemove: t,
+      onClick: n,
+      placeholder: d,
+      renderInput: () => l?.({
+        role: y,
+        "aria-expanded": j,
+        "aria-controls": v,
+        "aria-activedescendant": M,
+        "aria-haspopup": S,
+        "aria-label": I,
+        "aria-describedby": g,
+        onKeyDown: T,
+        onFocus: k,
+        onBlur: q
+      }),
+      singleLine: p,
+      borderRadius: s,
+      dropdownOpened: o,
+      onToggleDropdown: c,
+      size: e,
+      id: u,
+      error: b,
+      disabled: m,
+      clearable: f,
+      onClear: x,
+      onPointerDown: w
+    }
+  );
+};
+export {
+  F as MultiSelectInput
+};

package/dist/components/multi-select/multi-select.d.ts

@@ -0,0 +1,28 @@
+import { MultiSelectProps } from './multi-select.types';
+/**
+ * 多选下拉组件 (MultiSelect)
+ *
+ * 一个响应式的多项选择组件，外观上类似于带标签（Tag）的输入框。
+ * - 桌面端：点击弹出下拉列表 (`BaseMultiSelect`)，选中的项以 Tag 的形式展示在输入框内。
+ * - 移动端：点击从底部弹出面板 (`MultiSelectMobile` / Bottom Action)，更适合触屏操作。
+ *
+ * `searchable` 只作用于移动端底部面板；桌面端 Tag 输入框恒可输入过滤，不受该属性影响。
+ *
+ * @param props 组件的属性配置
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   label="选择技能"
+ *   placeholder="请选择技能"
+ *   options={[
+ *     { label: 'React', value: 'react' },
+ *     { label: 'Vue', value: 'vue' },
+ *   ]}
+ *   value={selectedSkills}
+ *   onChange={setSelectedSkills}
+ *   clearable
+ * />
+ * ```
+ */
+export declare const MultiSelect: (props: MultiSelectProps) => import("react").JSX.Element;

package/dist/components/multi-select/multi-select.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { useId as m } from "@mantine/hooks";
+import "../../provider/ui-context.js";
+import "react";
+import { useDeviceType as n } from "../../provider/hooks.js";
+import { resolveSearchable as a } from "../_inner/base-select/common/searchable.js";
+import { getFormProps as i } from "../base-input/util.js";
+import { BaseMultiSelect as c } from "./base-multi-select.js";
+import { MultiSelectMobile as f } from "./multi-select.mobile.js";
+const x = (e) => {
+  const { deviceType: r } = n(), l = r == "mobile", o = m(e.id);
+  return l ? /* @__PURE__ */ t(
+    f,
+    {
+      ...e,
+      ...i(e, e.onClear),
+      onClear: e.onClear,
+      id: o,
+      searchable: a(e.searchable, e.options)
+    }
+  ) : /* @__PURE__ */ t(
+    c,
+    {
+      ...e,
+      ...i(e, e.onClear),
+      onClear: e.onClear,
+      id: o
+    }
+  );
+};
+export {
+  x as MultiSelect
+};

package/dist/components/multi-select/multi-select.mobile.d.ts

@@ -0,0 +1,4 @@
+import { MultiSelectProps } from './multi-select.types';
+type MultiSelectMobileProps = MultiSelectProps;
+export declare const MultiSelectMobile: (props: MultiSelectMobileProps) => import("react").JSX.Element;
+export {};

package/dist/components/multi-select/multi-select.mobile.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { useUncontrolled as C } from "@mantine/hooks";
+import { useFormWrapperProps as g } from "../../common/use-form-wrapper-props.js";
+import "../../provider/ui-context.js";
+import "react";
+import { useLocale as y } from "../../provider/hooks.js";
+import { BottomAction as S } from "../_inner/bottom-action/bottom-action.js";
+import { FormItemWrapper as v } from "../form-wrapper/form-item-wrapper.js";
+import { MultiSelectInput as p } from "./multi-select-input.js";
+const L = (e) => {
+  const o = y(), [r, a] = C({
+    value: e.value,
+    defaultValue: e.defaultValue,
+    finalValue: [],
+    onChange: e.onChange
+  }), c = (t) => {
+    a(t);
+  }, d = (t) => {
+    a(r.filter((h) => h !== t));
+  }, n = e.onClear ?? (() => a([])), { wrapProps: u, rest: s, outerDescribedBy: i } = g(
+    e,
+    e.id
+  ), { emptyState: T, searchable: f, ...m } = s, b = () => /* @__PURE__ */ l(
+    p,
+    {
+      ...m,
+      value: r,
+      onRemove: d,
+      onClear: n,
+      onClick: () => {
+      },
+      "aria-describedby": i
+    }
+  );
+  return /* @__PURE__ */ l(
+    S,
+    {
+      title: o.pleaseSelect,
+      actionItems: e.options.map((t) => ({ ...t })),
+      selectType: "multiple",
+      value: r,
+      searchable: f,
+      triggerAriaLabel: e["aria-label"] ?? e.placeholder ?? o.pleaseSelect,
+      disabled: e.disabled,
+      onConfirm: c,
+      renderOption: e.renderOption,
+      children: /* @__PURE__ */ l(v, { ...u, id: e.id, children: e.renderTarget ? e.renderTarget({
+        ...m,
+        value: r,
+        onClear: n,
+        "aria-describedby": i
+      }) : b() })
+    }
+  );
+};
+export {
+  L as MultiSelectMobile
+};

package/dist/components/multi-select/multi-select.types.d.ts

@@ -0,0 +1,56 @@
+import { FormProps, InputWrapProps, RefProps, RootClassNameProps, SimpleComponentSizeBase } from '../../common/components.types';
+import { SelectOptions } from '../_inner/base-select/common/select.types';
+import { MultiSelectInputProps } from './multi-select-input';
+import type { OptionsDropDownEmptyState } from '../_inner/dropdown/options-drop-down';
+import type { IconName } from '@wisdomgarden/torque-icons';
+export interface MultiSelectProps extends InputWrapProps, FormProps, RootClassNameProps, RefProps<HTMLInputElement> {
+    /** 组件尺寸 */
+    size?: SimpleComponentSizeBase;
+    /** 必填：下拉选项数组 */
+    options: SelectOptions[];
+    /** 左侧图标的名称 */
+    leftIconName?: IconName;
+    /** 右侧图标的名称 */
+    rightIconName?: IconName;
+    /** 无障碍标签 */
+    'aria-label'?: string;
+    /** 受控模式：当前选中的值数组 */
+    value?: string[];
+    /** 非受控模式：默认选中的值数组 */
+    defaultValue?: string[];
+    /** 选中值改变时的回调 */
+    onChange?: (value: string[]) => void;
+    /** 点击清空按钮时的回调 */
+    onClear?: () => void;
+    /** 桌面端下拉列表的自定义宽度 */
+    dropDownWidth?: string;
+    /** 是否支持在下拉列表中搜索选项 */
+    searchable?: boolean;
+    /** 是否禁用组件 */
+    disabled?: boolean;
+    /** 占位提示文本，在移动端同时用作底部弹出面板的标题 */
+    placeholder?: string;
+    /** 错误状态或错误提示信息 */
+    error?: boolean;
+    /** 是否显示清空按钮 */
+    clearable?: boolean;
+    /** 是否隐藏选中的值（常用于仅将其作为触发器的情况） */
+    hideValue?: boolean;
+    /** 左侧图标是否使用其 SVG 原色 */
+    leftIconUseOriginalColor?: boolean;
+    /** 已选标签是否强制在一行内显示（最多显示2个，额外的省略），默认为 true */
+    singleLine?: boolean;
+    /** 控制边框圆角 */
+    borderRadius?: 'full' | 'sm';
+    /** 关联的 HTML ID，默认随机生成 */
+    id?: string;
+    /** 自定义选项渲染函数,业务需要实现对移动端和PC端的判断，渲染不同的符合的样式。 */
+    renderOption?: (option: SelectOptions, selected?: boolean) => React.ReactNode;
+    /** Web 端下拉列表空态配置 */
+    readonly emptyState?: OptionsDropDownEmptyState;
+    /** 自定义目标渲染函数 */
+    readonly renderTarget?: (props: MultiSelectInputProps) => React.ReactElement;
+    /** PC 端下拉是否渲染到 Portal；嵌套浮层关系由 Popover 自动处理。@default true */
+    readonly withinPortal?: boolean;
+}
+export type BaseMultiSelectProps = MultiSelectProps;

package/dist/components/multi-select/multi-select.types.js

@@ -0,0 +1 @@
+"use client";

package/dist/components/multi-select/styles/base-multi-select.module.css.js

@@ -0,0 +1,16 @@
+"use client";
+const i = "_pillInputField_136ot_2", l = "_pillFieldFull_136ot_8", t = "_minWidthSm_136ot_15", d = "_minWidthMd_136ot_19", n = "_minWidthLg_136ot_23", _ = {
+  pillInputField: i,
+  pillFieldFull: l,
+  minWidthSm: t,
+  minWidthMd: d,
+  minWidthLg: n
+};
+export {
+  _ as default,
+  n as minWidthLg,
+  d as minWidthMd,
+  t as minWidthSm,
+  l as pillFieldFull,
+  i as pillInputField
+};

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

@@ -0,0 +1,3 @@
+export { notifications } from './notifications';
+export { Notification } from './notification';
+export type { NotificationOption } from './notification.types';

package/dist/components/notifications/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { notifications as t } from "./notifications.js";
+import { Notification as f } from "./notification.js";
+export {
+  f as Notification,
+  t as notifications
+};

package/dist/components/notifications/notification.d.ts

@@ -0,0 +1,11 @@
+import { NotificationOption } from './notification.types';
+export declare function Notification(props: NotificationOption & {
+    readonly getId: () => string;
+}): import("react").JSX.Element;
+/**
+ * 内部方法，调用 `@mantine/notifications` 显示通知，并绑定自定义的 `Notification` 组件。
+ *
+ * @param option - 传入的通知配置项
+ * @returns 自动生成或传入的通知 ID
+ */
+export declare function showNotification(option: NotificationOption): string;