@wisdomgarden/torque 0.1.0

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

@@ -0,0 +1,14 @@
+"use client";
+import { createUseExternalEvents as s } from "@mantine/core";
+const [t, e] = s("drawer-manager"), l = {
+  /** 打开抽屉 */
+  open: (r) => e("open")(r),
+  /** 关闭抽屉 */
+  close: () => e("close")(),
+  /** 关闭所有抽屉 */
+  closeAll: () => e("closeAll")()
+};
+export {
+  l as drawers,
+  t as useDrawerEvents
+};

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

@@ -0,0 +1,33 @@
+import { Drawer as MDrawer } from '@mantine/core';
+type MantineDrawerProps = Parameters<typeof MDrawer>[0];
+/** Distributes over `DrawerProps`, whose title/aria-label union must survive an omit. */
+export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * The dialog's accessible name can only come from plain text: Mantine builds
+ * `aria-labelledby` from `title`, and an `aria-label` handed to Mantine lands on the
+ * root wrapper instead of `role="dialog"`. A node or absent `title` therefore
+ * requires an explicit `aria-label`.
+ */
+export type DrawerNameProps = {
+    readonly title: string;
+    readonly 'aria-label'?: string;
+} | {
+    readonly title?: MantineDrawerProps['title'];
+    readonly 'aria-label': string;
+};
+export type DrawerProps = Omit<MantineDrawerProps, 'closeButtonProps' | 'title' | 'aria-label'> & {
+    /** 是否在抽屉内容区域添加水平方向的内边距 */
+    readonly withXPadding?: boolean;
+    /** 是否在抽屉内容区域添加顶部方向的内边距 */
+    readonly topPadding?: boolean;
+    /**
+     * 头部标题与关闭按钮的纵向对齐方式，默认 `center`。
+     * 标题为多行节点（如标题 + 说明）时传 `start`，让关闭按钮与首行对齐。
+     */
+    readonly headerAlign?: 'center' | 'start';
+} & DrawerNameProps;
+/**
+ * Pc端抽屉组件
+ */
+export declare const Drawer: ({ children, withCloseButton, withXPadding, topPadding, headerAlign, title, classNames, "aria-label": ariaLabel, ...props }: DrawerProps) => import("react").JSX.Element;
+export {};

package/dist/components/drawer/drawer.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { Drawer as u, Text as f } from "@mantine/core";
+import { clsx as t } from "clsx";
+import "../../provider/ui-context.js";
+import "react";
+import { useLocale as C } from "../../provider/hooks.js";
+import { IconButton as w } from "../icon-button/icon-button.js";
+import e from "./drawer.module.css.js";
+const S = ({
+  children: r,
+  withCloseButton: i = !0,
+  withXPadding: d = !0,
+  topPadding: l = !0,
+  headerAlign: h = "center",
+  title: o,
+  classNames: n,
+  "aria-label": g,
+  ...s
+}) => {
+  const c = o || i;
+  return /* @__PURE__ */ m(
+    u,
+    {
+      position: "right",
+      ...s,
+      title: g ?? (typeof o == "string" ? o : void 0),
+      withCloseButton: !1,
+      classNames: {
+        ...n,
+        header: t(e.hiddenHeader, n?.header),
+        body: t(e.drawerBody, n?.body),
+        content: t(e.drawerContent, n?.content)
+      },
+      children: [
+        c && /* @__PURE__ */ a(
+          x,
+          {
+            title: o,
+            withCloseButton: i,
+            headerAlign: h,
+            onClose: s.onClose
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: t(e.main, {
+              [e.mainXPadding]: d,
+              [e.mainTopPadding]: !c && l
+            }),
+            children: r
+          }
+        )
+      ]
+    }
+  );
+}, x = (r) => {
+  const i = C(), l = typeof r.title == "string" ? f : "div";
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: t(e.header, {
+        [e.headerAlignCenter]: r.headerAlign !== "start",
+        [e.headerAlignStart]: r.headerAlign === "start"
+      }),
+      children: [
+        /* @__PURE__ */ a(l, { className: e.headerTitle, children: r.title }),
+        r.withCloseButton && /* @__PURE__ */ a(
+          w,
+          {
+            variant: "text",
+            color: "regular",
+            size: "lg",
+            iconName: "close",
+            onClick: () => r.onClose?.(),
+            "aria-label": i.close
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  S as Drawer
+};

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

@@ -0,0 +1,34 @@
+"use client";
+const t = "_drawerBody_1t3fr_2", e = "_drawerContent_1t3fr_9", r = "_drawerContentWithBottomSection_1t3fr_13", n = "_drawerBodyWithBottomSection_1t3fr_18", d = "_drawerMain_1t3fr_24", o = "_drawerBottomSection_1t3fr_31", a = "_hiddenHeader_1t3fr_35", i = "_main_1t3fr_39", _ = "_mainXPadding_1t3fr_46", c = "_mainTopPadding_1t3fr_50", h = "_header_1t3fr_54", s = "_headerAlignCenter_1t3fr_61", m = "_headerAlignStart_1t3fr_65", w = "_headerTitle_1t3fr_69", f = {
+  drawerBody: t,
+  drawerContent: e,
+  drawerContentWithBottomSection: r,
+  drawerBodyWithBottomSection: n,
+  drawerMain: d,
+  drawerBottomSection: o,
+  hiddenHeader: a,
+  main: i,
+  mainXPadding: _,
+  mainTopPadding: c,
+  header: h,
+  headerAlignCenter: s,
+  headerAlignStart: m,
+  headerTitle: w
+};
+export {
+  f as default,
+  t as drawerBody,
+  n as drawerBodyWithBottomSection,
+  o as drawerBottomSection,
+  e as drawerContent,
+  r as drawerContentWithBottomSection,
+  d as drawerMain,
+  h as header,
+  s as headerAlignCenter,
+  m as headerAlignStart,
+  w as headerTitle,
+  a as hiddenHeader,
+  i as main,
+  c as mainTopPadding,
+  _ as mainXPadding
+};

package/dist/components/drawer/drawes.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 用于指令式打开侧边抽屉和底部抽屉的全局组件
+ */
+export declare const DrawerManager: () => import("react").JSX.Element;

package/dist/components/drawer/drawes.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as c, Fragment as m } from "react/jsx-runtime";
+import { useState as i, useRef as f, useCallback as u, Suspense as p, useImperativeHandle as d, useEffect as h } from "react";
+import { BaseBottomDrawer as g } from "../_inner/drawer/base-bottom-drawer.js";
+import { Drawer as w } from "./drawer.js";
+import { useDrawerEvents as D } from "./drawer-events.js";
+const b = () => {
+  const [r, s] = i([]), o = f(/* @__PURE__ */ new Map()), l = u((e) => {
+    s((t) => t.filter((n) => n.id !== e)), o.current.delete(e);
+  }, []);
+  return D({
+    open: (e) => {
+      const t = (/* @__PURE__ */ new Date()).getTime().toString();
+      s((n) => [...n, { id: t, props: e }]);
+    },
+    close: () => {
+      if (r.length > 0) {
+        const e = r[r.length - 1];
+        o.current.get(e.id)?.close();
+      }
+    },
+    closeAll: () => {
+      r.forEach((e) => {
+        o.current.get(e.id)?.close();
+      });
+    }
+  }), /* @__PURE__ */ c(m, { children: r.map((e) => (
+    // 抽屉内容由调用方传入，用到的 i18n ns 无法枚举，也就无法预热。本组件挂在 root
+    // layout 且是 children 的兄弟节点，没有边界时未加载的 ns 会在 render 期挂起并冒泡
+    // 到路由段骨架，整页变 loading。每个实例各自成边界，互不影响。
+    /* @__PURE__ */ c(p, { fallback: null, children: /* @__PURE__ */ c(
+      T,
+      {
+        item: e,
+        removeInstance: l,
+        ref: (t) => {
+          t ? o.current.set(e.id, t) : o.current.delete(e.id);
+        }
+      }
+    ) }, e.id)
+  )) });
+}, T = ({
+  item: r,
+  removeInstance: s,
+  ref: o
+}) => {
+  const [l, e] = i(!1);
+  d(o, () => ({
+    close: () => {
+      e(!1);
+    }
+  })), h(() => {
+    const a = setTimeout(() => {
+      e(!0);
+    }, 50);
+    return () => clearTimeout(a);
+  }, []);
+  const t = u(() => {
+    e(!1);
+  }, []);
+  let n = w;
+  return r.props.position === "bottom" && (n = g), /* @__PURE__ */ c(
+    n,
+    {
+      ...r.props,
+      opened: l,
+      onClose: () => {
+        t();
+      },
+      onTransitionEnd: () => {
+        if (!l) {
+          const a = setTimeout(() => {
+            s(r.id), clearTimeout(a);
+          }, 250);
+        }
+      }
+    }
+  );
+};
+export {
+  b as DrawerManager
+};

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

@@ -0,0 +1,4 @@
+export { Drawer } from './drawer';
+export type { DistributiveOmit, DrawerNameProps, DrawerProps } from './drawer';
+export { drawers } from './drawer-events';
+export { DrawerManager } from './drawes';

package/dist/components/drawer/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { Drawer as o } from "./drawer.js";
+import { drawers as t } from "./drawer-events.js";
+import { DrawerManager as m } from "./drawes.js";
+export {
+  o as Drawer,
+  m as DrawerManager,
+  t as drawers
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FilterProps } from './filter.types';
+/**
+ * 筛选器弹出层,处理移动端和pc端的弹出层不同的逻辑
+ */
+export default function FilterPopover(props: FilterProps & {
+    readonly isDesktop: boolean;
+    readonly target: (props: {
+        readonly dropdownOpened?: boolean;
+    }) => React.ReactElement;
+}): React.JSX.Element;

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

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useState as i } from "react";
+import "../../provider/ui-context.js";
+import { useLocale as m } from "../../provider/hooks.js";
+import { SingleSelect as c } from "../_inner/base-select/single-select/single-select.js";
+import { getFormProps as a } from "../base-input/util.js";
+import { useComboboxSearchInput as u } from "../combobox/hooks/use-combobox-search-input.js";
+import { SelectMobile as s } from "../select/select.mobile.js";
+import { TextInput as d } from "../text-input/text-input.js";
+import f from "./filter.module.css.js";
+function T(e) {
+  const t = m(), [n, l] = i("");
+  return e.isDesktop ? /* @__PURE__ */ o(
+    c,
+    {
+      ...e,
+      ...a(e),
+      options: e.options.filter(
+        (r) => r.label.toLowerCase().includes(n.toLowerCase())
+      ),
+      renderTarget: (r) => e.target({ dropdownOpened: r.dropdownOpened }),
+      renderDropdownHeader: () => e.searchable ? /* @__PURE__ */ o(
+        p,
+        {
+          size: "sm",
+          leftIconName: "search",
+          "aria-label": t.search,
+          className: f.searchInput,
+          value: n,
+          onChange: (r) => {
+            l(r.target.value);
+          }
+        }
+      ) : null
+    }
+  ) : /* @__PURE__ */ o(
+    s,
+    {
+      ...e,
+      ...a(e),
+      popoverTitle: e.placeholder,
+      renderTarget: () => e.target({ dropdownOpened: !1 })
+    }
+  );
+}
+function p(e) {
+  const t = u(e.onKeyDown);
+  return /* @__PURE__ */ o(d, { ...e, ...t });
+}
+export {
+  T as default
+};

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

@@ -0,0 +1,5 @@
+import { ButtonFilterProps } from './filter.types';
+/**
+ * 普通按钮筛选器组件
+ */
+export declare function Filter(p: ButtonFilterProps): import("react").JSX.Element;

package/dist/components/filter/filter.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as e, Fragment as u } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
+import "../../provider/ui-context.js";
+import "react";
+import { useDeviceType as b } from "../../provider/hooks.js";
+import { Button as d } from "../button/button.js";
+import f from "./filter-popover.js";
+import l from "./filter.module.css.js";
+function k(r) {
+  const { rotateRightIcon: s = !0, ...t } = r, { deviceType: a } = b(), n = a == "desktop", i = t.options.find(
+    (o) => o.value === (t.value ?? t.defaultValue)
+  )?.label, p = i ?? t.buttonProps?.children ?? t.buttonProps?.title ?? "", c = t.buttonProps?.["aria-label"] ?? t.buttonProps?.title ?? (typeof t.buttonProps?.children == "string" ? t.buttonProps.children : void 0) ?? t.placeholder ?? i;
+  return /* @__PURE__ */ e(f, { ...t, isDesktop: n, target: ({ dropdownOpened: o = !1 }) => /* @__PURE__ */ e(
+    d,
+    {
+      ...t.buttonProps,
+      "aria-label": c,
+      rightIconClassName: m(
+        l.targetIcon,
+        s && o && n && l.targetIconOpen
+      ),
+      children: !r.hideButtonLabel && /* @__PURE__ */ e(u, { children: p })
+    }
+  ) });
+}
+export {
+  k as Filter
+};

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

@@ -0,0 +1,12 @@
+"use client";
+const t = "_searchInput_10poy_2", e = "_targetIcon_10poy_6", n = "_targetIconOpen_10poy_10", c = {
+  searchInput: t,
+  targetIcon: e,
+  targetIconOpen: n
+};
+export {
+  c as default,
+  t as searchInput,
+  e as targetIcon,
+  n as targetIconOpen
+};

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

@@ -0,0 +1,27 @@
+import { SelectProps } from '../_inner/base-select/common/select.types';
+import { ButtonProps } from '../button';
+import { IconButtonProps } from '../icon-button';
+import { MultiSelectProps } from '../multi-select/multi-select.types';
+export type FilterProps = Pick<SelectProps, Exclude<keyof SelectProps, 'onClear' | 'clearable' | 'hideValue' | 'disabled' | 'leftIconName' | 'rightIconName' | 'aria-label' | 'rounded' | 'width' | 'size' | 'leftIconUseOriginalColor'>>;
+export type ButtonFilterProps = FilterProps & {
+    /** 筛选器按钮的属性 */
+    readonly buttonProps?: ButtonProps;
+    /** 是否再Pc端选项展开的时候旋转右侧的图标 */
+    readonly rotateRightIcon?: boolean;
+    /** 可以隐藏button的label显示以达到某种特殊效果 */
+    hideButtonLabel?: boolean;
+};
+export type IconFilterButton = FilterProps & {
+    /** 筛选器图标按钮的属性 */
+    readonly iconButtonProps: IconButtonProps;
+    /** 是否再Pc端选项展开的时候旋转图标 */
+    readonly rotateIcon?: boolean;
+};
+export type MultiFilterProps = Omit<MultiSelectProps, 'searchable' | 'hideValue' | 'borderRadius' | 'singleLine' | 'clearable' | 'aria-label' | 'rightIconName'> & {
+    /** 多选筛选按钮属性 */
+    readonly buttonProps?: Omit<ButtonProps, 'children'>;
+    /** 是否再Pc端选项展开的时候旋转图标 */
+    readonly rotateIcon?: boolean;
+    /** 当 value 全为这些值时，按钮显示 placeholder 而非选项 label（如 ['all'] 表示全选状态显示占位标题） */
+    readonly placeholderValues?: string[];
+};

package/dist/components/filter/filter.types.js

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IconFilterButton } from './filter.types';
+/**
+ * 图标按钮筛选器组件
+ */
+export declare const IconFilter: (p: IconFilterButton) => React.JSX.Element;

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

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as i } from "clsx";
+import "../../provider/ui-context.js";
+import "react";
+import { useDeviceType as m } from "../../provider/hooks.js";
+import { IconButton as a } from "../icon-button/icon-button.js";
+import f from "./filter-popover.js";
+import e from "./filter.module.css.js";
+const B = (s) => {
+  const { rotateIcon: n = !0, ...t } = s, { deviceType: p } = m(), o = p == "desktop";
+  return /* @__PURE__ */ r(f, { ...t, isDesktop: o, target: ({ dropdownOpened: c = !1 }) => /* @__PURE__ */ r(
+    a,
+    {
+      ...t.iconButtonProps,
+      iconClassName: i(
+        e.targetIcon,
+        n && c && o && e.targetIconOpen
+      )
+    }
+  ) });
+};
+export {
+  B as IconFilter
+};

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

@@ -0,0 +1,4 @@
+export { Filter } from './filter';
+export { IconFilter } from './icon-filter';
+export { MultiFilter } from './multi-filter';
+export type * from './filter.types';

package/dist/components/filter/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { Filter as t } from "./filter.js";
+import { IconFilter as i } from "./icon-filter.js";
+import { MultiFilter as f } from "./multi-filter.js";
+export {
+  t as Filter,
+  i as IconFilter,
+  f as MultiFilter
+};

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

@@ -0,0 +1,5 @@
+import { MultiFilterProps } from './filter.types';
+/**
+ * 多选筛选器组件
+ */
+export declare function MultiFilter({ rotateIcon, placeholderValues, ...props }: MultiFilterProps): import("react").JSX.Element;

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

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useId as f } from "@mantine/hooks";
+import { clsx as h } from "clsx";
+import "../../provider/ui-context.js";
+import "react";
+import { useLocale as y, useDeviceType as I } from "../../provider/hooks.js";
+import { getFormProps as d } from "../base-input/util.js";
+import { Button as u } from "../button/button.js";
+import { BaseMultiSelect as P } from "../multi-select/base-multi-select.js";
+import { MultiSelectMobile as M } from "../multi-select/multi-select.mobile.js";
+import m from "./filter.module.css.js";
+function F({
+  rotateIcon: s = !0,
+  placeholderValues: r,
+  ...t
+}) {
+  const b = y(), { deviceType: g } = I(), n = g == "desktop", a = f(t.id), i = (e) => e.map((l) => t.options?.find((v) => v.value === l)?.label ?? l).join(b.listSeparator), c = (e) => {
+    const l = e.value?.length ? i(e.value) : void 0;
+    return {
+      ...t.buttonProps,
+      "aria-label": t.buttonProps?.["aria-label"] ?? t.buttonProps?.title ?? t.placeholder ?? l,
+      "aria-describedby": e["aria-describedby"],
+      disabled: t.disabled,
+      rightIconName: t.buttonProps?.rightIconName ?? "arrow-down-filled",
+      rightIconClassName: h(
+        m.targetIcon,
+        s && e.dropdownOpened && n && m.targetIconOpen
+      )
+    };
+  };
+  return n ? /* @__PURE__ */ o(
+    P,
+    {
+      ...t,
+      ...d(t, t.onClear),
+      id: a,
+      renderTarget: (e) => /* @__PURE__ */ o(u, { ...c(e), children: e.value && e.value.length > 0 && !(r?.length && e.value.every((l) => r.includes(l))) ? i(e.value) : t.placeholder })
+    }
+  ) : /* @__PURE__ */ o(
+    M,
+    {
+      ...t,
+      ...d(t, t.onClear),
+      id: a,
+      renderTarget: (e) => /* @__PURE__ */ o(u, { ...c(e), children: e.value && e.value.length > 0 && !(r?.length && e.value.every((l) => r.includes(l))) ? i(e.value) : t.placeholder })
+    }
+  );
+}
+export {
+  F as MultiFilter
+};

package/dist/components/flex/flex.d.ts

@@ -0,0 +1,9 @@
+import { LayoutElement } from '../box/box.types';
+import type { FlexProps } from './layout.types';
+/**
+ * 通用 Flexbox 布局容器。支持方向、对齐、两端对齐、换行、间距等全套 flex 属性。
+ *
+ * 内部样式位于 `@layer lib`，外部 `className` 可稳定覆盖。
+ * 支持通过 `component` prop 渲染为不同 HTML 标签（仅字符串标签）。
+ */
+export declare function Flex<T extends LayoutElement = 'div'>(props: FlexProps<T>): import("react").JSX.Element;

package/dist/components/flex/flex.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as p } from "clsx";
+import { Box as d } from "../box/box.js";
+import f from "./flex.module.css.js";
+function j(a) {
+  const {
+    direction: r = "row",
+    align: o = "stretch",
+    justify: i = "flex-start",
+    wrap: s = "nowrap",
+    gap: t,
+    inline: e,
+    className: n,
+    ...l
+  } = a, c = {
+    "data-direction": r,
+    "data-align": o,
+    "data-justify": i,
+    "data-wrap": s,
+    ...t && { "data-gap": t },
+    ...e && { "data-inline": !0 }
+  };
+  return /* @__PURE__ */ m(d, { className: p(f.root, n), ...c, ...l });
+}
+export {
+  j as Flex
+};

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

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

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

@@ -0,0 +1,2 @@
+export type * from './layout.types';
+export { Flex } from './flex';

package/dist/components/flex/index.js

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

package/dist/components/flex/layout.types.d.ts

@@ -0,0 +1,69 @@
+import { BoxProps, LayoutElement } from '../box/box.types';
+/**
+ * `gap` prop 接受的设计规范间距 token。
+ *
+ * 对应 `--t-space-*` CSS 变量，内部映射为 Tailwind `gap-*` class。
+ * 非标间距请使用 `className`（如 `className="gap-[14px]"`）。
+ */
+export type GapToken = 'none' | 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+/** flex-direction 取值。 */
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+/** align-items 取值 */
+export type FlexAlign = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+/** justify-content 取值 */
+export type FlexJustify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+/** flex-wrap 取值。 */
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+/**
+ * Flex 组件完整 Props = 自有 prop + 对应 HTML 标签的原生属性。
+ */
+export type FlexProps<T extends LayoutElement = 'div'> = BoxProps<T> & {
+    /** 主轴方向，默认 `'row'`。 */
+    readonly direction?: FlexDirection;
+    /** 交叉轴对齐，默认 `'stretch'`。 */
+    readonly align?: FlexAlign;
+    /** 主轴对齐，默认 `'flex-start'`。 */
+    readonly justify?: FlexJustify;
+    /** 换行方式，默认 `'nowrap'`。 */
+    readonly wrap?: FlexWrap;
+    /** 间距 token，仅接受设计规范值；非标间距用 `className`。 */
+    readonly gap?: GapToken;
+    /** 是否使用 `inline-flex`，默认 `false`。 */
+    readonly inline?: boolean;
+};
+/**
+ * Group 组件 Props。
+ *
+ * 继承 FlexProps 除 `direction` 外的全部能力（方向固定为 `row`），
+ * 额外支持 `grow` 均分和 `preventGrowOverflow` 溢出保护。
+ *
+ * @typeParam T - 渲染的 HTML 标签，默认 `'div'`。
+ */
+export type GroupProps<T extends LayoutElement = 'div'> = Omit<FlexProps<T>, 'direction'> & {
+    /** 子元素是否均分剩余空间（`flex: 1; flex-basis: 0`），默认 `false`。 */
+    readonly grow?: boolean;
+    /** 仅 `grow` 启用时生效，为子元素添加 `min-width: 0` 防止内容撑爆容器，默认 `true`。 */
+    readonly preventGrowOverflow?: boolean;
+};
+/**
+ * Stack 组件 Props。
+ *
+ * 继承 FlexProps 除 `direction` 外的全部能力（方向固定为 `column`）。
+ *
+ * @typeParam T - 渲染的 HTML 标签，默认 `'div'`。
+ */
+export type StackProps<T extends LayoutElement = 'div'> = Omit<FlexProps<T>, 'direction'>;
+/**
+ * Paper 组件 Props。
+ *
+ * 视觉表面容器（卡片/面板），仅负责外观（阴影、圆角、主题化背景 `--t-fill-8`），
+ * 不包含任何布局能力——内部排版请嵌套 Flex / Group / Stack。
+ *
+ * @typeParam T - 渲染的 HTML 标签，默认 `'div'`。
+ */
+export type PaperProps<T extends LayoutElement = 'div'> = BoxProps<T> & {
+    /** 阴影级别，默认无阴影。 */
+    readonly shadow?: 'none' | '1' | '2' | '3' | '4' | '5' | '6';
+    /** 圆角大小，默认 `'lg'`。 */
+    readonly radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
+};