@wisdomgarden/torque 0.1.0

package/dist/components/combobox/hooks/use-combobox-search-input.js

@@ -0,0 +1,22 @@
+"use client";
+import { useCallback as a } from "react";
+import { useComboboxContext as d } from "../combobox-context.js";
+import { useComboboxTargetKeyDown as c } from "./use-combobox-target-key-down.js";
+function l(t) {
+  const { store: o, listboxId: i } = d(), { handleKeyDown: n } = c("input"), r = a(
+    (e) => {
+      t?.(e), e.defaultPrevented || n(e);
+    },
+    [n, t]
+  );
+  return {
+    role: "combobox",
+    "aria-expanded": o.opened,
+    "aria-controls": i,
+    ...o.highlightedOptionId && o.opened ? { "aria-activedescendant": o.highlightedOptionId } : {},
+    onKeyDown: r
+  };
+}
+export {
+  l as useComboboxSearchInput
+};

package/dist/components/combobox/hooks/use-combobox-target-key-down.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComboboxTargetProps } from '../combobox.types';
+/**
+ * 复合框触发器键盘导航 Hook
+ *
+ * 返回 `handleKeyDown` 和 `selectedOptionId`：
+ * - `handleKeyDown`：绑定到触发器元素的 `onKeyDown`
+ * - `selectedOptionId`：当前键盘高亮选项的 id，用于 `aria-activedescendant`
+ */
+export declare function useComboboxTargetKeyDown(targetType?: ComboboxTargetProps['targetType']): {
+    handleKeyDown: React.KeyboardEventHandler<HTMLElement>;
+};

package/dist/components/combobox/hooks/use-combobox-target-key-down.js

@@ -0,0 +1,35 @@
+"use client";
+import { useCallback as i } from "react";
+import { useComboboxContext as r } from "../combobox-context.js";
+function h(o = "button") {
+  const { store: e, listboxId: n } = r();
+  return { handleKeyDown: i(
+    (t) => {
+      if (!(t.nativeEvent.isComposing || t.nativeEvent.keyCode === 229)) {
+        if (t.key === "Enter") {
+          if (o === "input" && !e.highlightedOptionId) return;
+          t.preventDefault(), e.highlightedOptionId ? e.selectHighlightedOption(n) : e.toggle();
+          return;
+        }
+        if (t.key === " ") {
+          if (o === "input") return;
+          t.preventDefault(), e.toggle();
+          return;
+        }
+        if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+          if (t.preventDefault(), !e.opened) {
+            e.open();
+            return;
+          }
+          t.key === "ArrowDown" ? e.highlightNextOption(n) : e.highlightPreviousOption(n);
+          return;
+        }
+        t.key === "Tab" && e.close();
+      }
+    },
+    [e, n, o]
+  ) };
+}
+export {
+  h as useComboboxTargetKeyDown
+};

package/dist/components/combobox/hooks/use-combobox.d.ts

@@ -0,0 +1,58 @@
+export interface UseComboboxOptions {
+    /** 非受控初始展开状态 @default false */
+    defaultOpened?: boolean;
+    /** 受控展开状态 */
+    opened?: boolean;
+    /** 展开状态变更回调 */
+    onOpenChange?: (opened: boolean) => void;
+    /** dropdown 打开时的回调 */
+    onDropdownOpen?: () => void;
+    /** dropdown 关闭时的回调 */
+    onDropdownClose?: () => void;
+    /** 键盘导航是否循环 @default true */
+    loop?: boolean;
+}
+/**
+ * 复合框状态管理 Hook
+ *
+ * 返回一个 store 对象，包含开关状态、键盘导航方法和 target ref 管理。
+ * 可以传给 `<Combobox store={combobox}>` 以实现外部控制；
+ * 不传时 Combobox 内部自动创建。
+ *
+ * @example
+ * ```tsx
+ * // SearchSelect：input 模式，只开不关
+ * const combobox = useCombobox();
+ *
+ * <Combobox store={combobox} onOptionSubmit={handleSelect}>
+ *   <Combobox.Target targetType="input">
+ *     <BaseInput onBlur={combobox.close} onChange={handleSearch} />
+ *   </Combobox.Target>
+ *   <Combobox.Dropdown>...</Combobox.Dropdown>
+ * </Combobox>
+ *
+ * // SingleSelect：button 模式（默认），toggle
+ * const combobox = useCombobox();
+ *
+ * <Combobox store={combobox} onOptionSubmit={handleSelect}>
+ *   <Combobox.Target>
+ *     <Button>{selected ?? '请选择'}</Button>
+ *   </Combobox.Target>
+ *   <Combobox.Dropdown>...</Combobox.Dropdown>
+ * </Combobox>
+ * ```
+ */
+export declare function useCombobox({ defaultOpened, opened: openedProp, onOpenChange, onDropdownOpen, onDropdownClose, loop, }?: UseComboboxOptions): {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    targetRef: import("react").RefObject<HTMLElement | null>;
+    focusTarget: () => void;
+    highlightedOptionId: string | null;
+    highlightNextOption: (listboxId: string) => string | null;
+    highlightPreviousOption: (listboxId: string) => string | null;
+    resetHighlight: (listboxId: string) => void;
+    selectHighlightedOption: (listboxId: string) => void;
+};
+export type ComboboxStore = ReturnType<typeof useCombobox>;

package/dist/components/combobox/hooks/use-combobox.js

@@ -0,0 +1,90 @@
+"use client";
+import { useUncontrolled as V } from "@mantine/hooks";
+import { useState as C, useRef as f, useCallback as e, useEffect as M } from "react";
+function U({
+  defaultOpened: I = !1,
+  opened: T,
+  onOpenChange: S,
+  onDropdownOpen: m,
+  onDropdownClose: x,
+  loop: p = !0
+} = {}) {
+  const [n, l] = V({
+    value: T,
+    defaultValue: I,
+    finalValue: !1,
+    onChange: S
+  }), [q, d] = C(
+    null
+  ), y = f(null), r = f(-1), b = f(
+    void 0
+  ), g = e(() => {
+    n || (l(!0), m?.());
+  }, [n, l, m]), h = e(() => {
+    n && (l(!1), d(null), x?.());
+  }, [n, l, x]), v = e(() => {
+    n ? h() : g();
+  }, [n, g, h]), A = e(() => {
+    clearTimeout(b.current), b.current = setTimeout(() => {
+      const t = y.current;
+      if (!t) return;
+      ((t.matches(
+        'button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      ) ? t : t.querySelector(
+        'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )) ?? t).focus();
+    }, 0);
+  }, []), k = e((t) => {
+    const o = document.getElementById(t);
+    return o ? Array.from(
+      o.querySelectorAll(
+        '[role="option"]:not([aria-disabled="true"])'
+      )
+    ) : [];
+  }, []), i = e((t) => {
+    const o = document.getElementById(t);
+    o && o.querySelector("[data-combobox-keyboard]")?.removeAttribute("data-combobox-keyboard");
+  }, []), u = e(
+    (t, o) => {
+      const c = k(o);
+      if (c.length === 0) return null;
+      const s = c.length, a = p ? (t % s + s) % s : Math.max(0, Math.min(t, s - 1));
+      i(o), r.current = a, c[a].setAttribute("data-combobox-keyboard", "true"), c[a].scrollIntoView({ block: "nearest" });
+      const O = c[a].id;
+      return d(O), O;
+    },
+    [k, i, p]
+  ), E = e(
+    (t) => u(r.current + 1, t),
+    [u]
+  ), H = e(
+    (t) => u(
+      r.current === -1 ? -1 : r.current - 1,
+      t
+    ),
+    [u]
+  ), B = e(
+    (t) => {
+      r.current = -1, i(t), d(null);
+    },
+    [i]
+  ), R = e((t) => {
+    document.getElementById(t)?.querySelector("[data-combobox-keyboard]")?.click();
+  }, []);
+  return M(() => () => clearTimeout(b.current), []), {
+    opened: n,
+    open: g,
+    close: h,
+    toggle: v,
+    targetRef: y,
+    focusTarget: A,
+    highlightedOptionId: q,
+    highlightNextOption: E,
+    highlightPreviousOption: H,
+    resetHighlight: B,
+    selectHighlightedOption: R
+  };
+}
+export {
+  U as useCombobox
+};

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

@@ -0,0 +1,5 @@
+export { Combobox } from './combobox';
+export { useComboboxContext } from './combobox-context';
+export { useCombobox } from './hooks/use-combobox';
+export type { ComboboxInfiniteDropdownProps } from './combobox-infinite-dropdown';
+export type { ComboboxProps, ComboboxTargetProps, ComboboxOptionsProps, ComboboxOptionProps, ComboboxSearchProps, ComboboxStore, UseComboboxOptions, } from './combobox.types';

package/dist/components/combobox/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { Combobox as x } from "./combobox.js";
+import { useComboboxContext as m } from "./combobox-context.js";
+import { useCombobox as t } from "./hooks/use-combobox.js";
+export {
+  x as Combobox,
+  t as useCombobox,
+  m as useComboboxContext
+};

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

@@ -0,0 +1,14 @@
+"use client";
+const n = "_dropdown_1w0tn_2", o = "_options_1w0tn_9", t = "_option_1w0tn_9", i = "_infiniteSentinel_1w0tn_63", e = {
+  dropdown: n,
+  options: o,
+  option: t,
+  infiniteSentinel: i
+};
+export {
+  e as default,
+  n as dropdown,
+  i as infiniteSentinel,
+  t as option,
+  o as options
+};

package/dist/components/combobox/subs/combobox-bottom-drawer-dropdown.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BottomDrawerProps } from '../../bottom-drawer';
+import { DistributiveOmit } from '../../drawer';
+export type ComboboxBottomDrawerDropdownProps = DistributiveOmit<BottomDrawerProps, 'opened' | 'onClose'>;
+/**
+ * 移动端复合框下拉面板 (ComboboxBottomDrawerDropdown)
+ *
+ * 在移动端设备下，以下部抽屉 (BottomDrawer) 的形式展示选项列表。
+ */
+export declare function ComboboxBottomDrawerDropdown({ children, ...rest }: ComboboxBottomDrawerDropdownProps): React.JSX.Element;

package/dist/components/combobox/subs/combobox-bottom-drawer-dropdown.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { BottomDrawer as m } from "../../bottom-drawer/bottom-drawer.js";
+import { useComboboxContext as n } from "../combobox-context.js";
+function x({
+  children: e,
+  ...r
+}) {
+  const { store: o } = n();
+  return /* @__PURE__ */ t(m, { opened: o.opened, onClose: o.close, ...r, children: e });
+}
+export {
+  x as ComboboxBottomDrawerDropdown
+};

package/dist/components/combobox/subs/combobox-bottom-drawer-target.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ComboboxTargetProps } from '../combobox.types';
+export declare function ComboboxBottomDrawerTarget({ children }: ComboboxTargetProps): React.ReactElement<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>, string | React.JSXElementConstructor<any>>;

package/dist/components/combobox/subs/combobox-bottom-drawer-target.js

@@ -0,0 +1,20 @@
+"use client";
+import a from "react";
+import { useComboboxContext as i } from "../combobox-context.js";
+function m({ children: t }) {
+  const { store: o, listboxId: r } = i(), e = t;
+  return a.cloneElement(e, {
+    ref: o.targetRef,
+    role: "combobox",
+    "aria-expanded": o.opened,
+    "aria-haspopup": "dialog",
+    "aria-controls": r,
+    onFocus: void 0,
+    onClick(n) {
+      e.props.onClick?.(n), o.toggle();
+    }
+  });
+}
+export {
+  m as ComboboxBottomDrawerTarget
+};

package/dist/components/data-filter/data-filter-content.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button';
+interface DataFilterContentProps {
+    actionButtonProps?: Pick<ButtonProps, 'size'>;
+    children: ReactNode;
+    onReset: () => void;
+    resetLabel: ReactNode;
+    showHeader?: boolean;
+    title?: ReactNode;
+    titleId?: string;
+}
+export declare function DataFilterContent({ actionButtonProps, children, onReset, resetLabel, showHeader, title, titleId, }: Readonly<DataFilterContentProps>): import("react").JSX.Element;
+export {};

package/dist/components/data-filter/data-filter-content.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Box as p } from "../box/box.js";
+import { Button as f } from "../button/button.js";
+import { Group as d } from "../group/group.js";
+import { Stack as i } from "../stack/stack.js";
+import r from "./data-filter.module.css.js";
+function j({
+  actionButtonProps: n,
+  children: l,
+  onReset: c,
+  resetLabel: o,
+  showHeader: e = !0,
+  title: s,
+  titleId: m
+}) {
+  return /* @__PURE__ */ a(i, { gap: "lg", className: r.content, children: [
+    e && /* @__PURE__ */ a(d, { justify: "space-between", wrap: "nowrap", className: r.header, children: [
+      /* @__PURE__ */ t("h2", { id: m, className: r.title, children: s }),
+      /* @__PURE__ */ t(
+        f,
+        {
+          variant: "text",
+          color: "secondary",
+          leftIconName: "reset-circle",
+          "aria-label": typeof o == "string" ? o : void 0,
+          onClick: c,
+          ...n,
+          children: o
+        }
+      )
+    ] }),
+    e && /* @__PURE__ */ t(
+      p,
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        className: r.divider
+      }
+    ),
+    /* @__PURE__ */ t(i, { gap: "lg", className: r.filters, children: l })
+  ] });
+}
+export {
+  j as DataFilterContent
+};

package/dist/components/data-filter/data-filter-drawer.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button';
+interface DataFilterDrawerProps {
+    actionButtonProps?: Pick<ButtonProps, 'size'>;
+    children: ReactNode;
+    confirmLabel: ReactNode;
+    id: string;
+    keepMounted?: boolean;
+    /** node 标题无法作为对话框可访问名，必填；与触发按钮同名 */
+    'aria-label': string;
+    onClose: () => void;
+    onConfirm?: () => void;
+    onReset: () => void;
+    opened: boolean;
+    resetLabel: ReactNode;
+    title: ReactNode;
+}
+export declare function DataFilterDrawer({ actionButtonProps, children, confirmLabel, id, keepMounted, 'aria-label': ariaLabel, onClose, onConfirm, onReset, opened, resetLabel, title, }: Readonly<DataFilterDrawerProps>): import("react").JSX.Element;
+export {};

package/dist/components/data-filter/data-filter-drawer.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { BottomDrawer as u } from "../bottom-drawer/bottom-drawer.js";
+import { Box as x } from "../box/box.js";
+import { Button as m } from "../button/button.js";
+import { Group as D } from "../group/group.js";
+import { DataFilterContent as N } from "./data-filter-content.js";
+import a from "./data-filter.module.css.js";
+function y({
+  actionButtonProps: o,
+  children: l,
+  confirmLabel: n,
+  id: c,
+  keepMounted: s,
+  "aria-label": d,
+  onClose: t,
+  onConfirm: p,
+  onReset: e,
+  opened: f,
+  resetLabel: i,
+  title: w
+}) {
+  return /* @__PURE__ */ r(
+    u,
+    {
+      id: c,
+      keepMounted: s,
+      opened: f,
+      onClose: t,
+      title: w,
+      "aria-label": d,
+      zIndex: 199,
+      bottomSection: /* @__PURE__ */ h(D, { gap: "sm", wrap: "nowrap", className: a.drawerActions, children: [
+        /* @__PURE__ */ r(
+          m,
+          {
+            className: a.drawerAction,
+            variant: "stroke",
+            color: "regular",
+            onClick: e,
+            ...o,
+            children: i
+          }
+        ),
+        /* @__PURE__ */ r(
+          m,
+          {
+            className: a.drawerAction,
+            variant: "primary",
+            color: "brand",
+            onClick: () => {
+              p?.(), t();
+            },
+            ...o,
+            children: n
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ r(x, { className: a.drawerContent, children: /* @__PURE__ */ r(
+        N,
+        {
+          onReset: e,
+          resetLabel: i,
+          showHeader: !1,
+          children: l
+        }
+      ) })
+    }
+  );
+}
+export {
+  y as DataFilterDrawer
+};

package/dist/components/data-filter/data-filter-inline.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface DataFilterInlineProps {
+    children: ReactNode;
+}
+export declare function DataFilterInline({ children, }: Readonly<DataFilterInlineProps>): import("react").JSX.Element;
+export {};

package/dist/components/data-filter/data-filter-inline.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { Group as e } from "../group/group.js";
+import i from "./data-filter.module.css.js";
+function m({
+  children: r
+}) {
+  return /* @__PURE__ */ t(e, { gap: "lg", className: i.inline, children: r });
+}
+export {
+  m as DataFilterInline
+};

package/dist/components/data-filter/data-filter-panel.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button';
+interface DataFilterPanelProps {
+    actionButtonProps?: Pick<ButtonProps, 'size'>;
+    children: ReactNode;
+    keepMounted?: boolean;
+    onReset: () => void;
+    resetLabel: ReactNode;
+    title: ReactNode;
+    titleId: string;
+}
+export declare function DataFilterPanel({ actionButtonProps, children, keepMounted, onReset, resetLabel, title, titleId, }: Readonly<DataFilterPanelProps>): import("react").JSX.Element;
+export {};

package/dist/components/data-filter/data-filter-panel.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { Popover as l } from "../popover/index.js";
+import { DataFilterContent as s } from "./data-filter-content.js";
+import p from "./data-filter.module.css.js";
+const c = 440, f = 580;
+function P({
+  actionButtonProps: o,
+  children: r,
+  keepMounted: e,
+  onReset: i,
+  resetLabel: n,
+  title: a,
+  titleId: m
+}) {
+  return /* @__PURE__ */ t(
+    l.Dropdown,
+    {
+      keepMounted: e,
+      width: c,
+      maxHeight: f,
+      radius: "lg",
+      className: p.panel,
+      children: /* @__PURE__ */ t(
+        s,
+        {
+          actionButtonProps: o,
+          onReset: i,
+          resetLabel: n,
+          title: a,
+          titleId: m,
+          children: r
+        }
+      )
+    }
+  );
+}
+export {
+  P as DataFilterPanel
+};

package/dist/components/data-filter/data-filter.d.ts

@@ -0,0 +1,2 @@
+import { DataFilterProps } from './data-filter.types';
+export declare function DataFilter<T>(props: Readonly<DataFilterProps<T>>): import("react").JSX.Element;

package/dist/components/data-filter/data-filter.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import { useId as f } from "react";
+import "../../provider/ui-context.js";
+import { useLocale as v } from "../../provider/hooks.js";
+import { Button as F } from "../button/button.js";
+import { FormItemWrapperDefaultsProvider as I } from "../form-wrapper/form-item-wrapper-defaults-context.js";
+import { IconButton as P } from "../icon-button/icon-button.js";
+import { Popover as d } from "../popover/index.js";
+import { DataFilterDrawer as B } from "./data-filter-drawer.js";
+import { DataFilterInline as L } from "./data-filter-inline.js";
+import { DataFilterPanel as N } from "./data-filter-panel.js";
+import p from "./data-filter.module.css.js";
+import { useDataFilterState as O } from "./hooks/use-data-filter-state.js";
+function G(t) {
+  const { position: u = "bottom-start" } = t, n = v(), s = f(), g = f(), e = O(t), c = n.filter, r = t.title ?? c, i = typeof r == "string" ? r : c, m = n.reset, D = n.confirm, k = {
+    labelClassName: p.formItemLabel,
+    layout: "horizontal"
+  }, l = e.isDesktop ? /* @__PURE__ */ o(I, { value: k, children: e.filters }) : e.filters;
+  if (e.placement === "inline")
+    return /* @__PURE__ */ o(L, { children: l });
+  const a = e.hasActiveFilters ? p.activeTriggerContent : void 0, b = e.isDesktop ? /* @__PURE__ */ o(
+    F,
+    {
+      color: "regular",
+      ...t.triggerButtonProps,
+      leftIconName: "filter",
+      leftIconClassName: a,
+      "aria-label": i,
+      children: /* @__PURE__ */ o("span", { className: a, children: r })
+    }
+  ) : /* @__PURE__ */ o(
+    P,
+    {
+      color: "regular",
+      ...t.triggerButtonProps,
+      iconName: "filter",
+      iconClassName: a,
+      "aria-label": i
+    }
+  ), h = t.renderTrigger?.({ opened: e.opened }) ?? b;
+  return /* @__PURE__ */ C(
+    d,
+    {
+      opened: e.opened,
+      onOpenChange: e.onOpenChange,
+      position: u,
+      closeOnClickOutside: e.isDesktop,
+      closeOnEscape: e.isDesktop,
+      "aria-labelledby": e.isDesktop ? s : void 0,
+      trapFocus: e.isDesktop,
+      children: [
+        /* @__PURE__ */ o(
+          d.Target,
+          {
+            ...e.isDesktop ? {} : { "aria-controls": void 0 },
+            children: h
+          }
+        ),
+        e.isDesktop ? /* @__PURE__ */ o(
+          N,
+          {
+            actionButtonProps: t.actionButtonProps,
+            keepMounted: t.keepMounted,
+            onReset: e.onReset,
+            resetLabel: m,
+            title: r,
+            titleId: s,
+            children: l
+          }
+        ) : /* @__PURE__ */ o(
+          B,
+          {
+            actionButtonProps: t.actionButtonProps,
+            confirmLabel: D,
+            id: g,
+            keepMounted: t.keepMounted,
+            opened: e.opened,
+            onClose: () => e.onOpenChange(!1),
+            onConfirm: e.onConfirm,
+            onReset: e.onReset,
+            resetLabel: m,
+            title: r,
+            "aria-label": i,
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  G as DataFilter
+};