@teamix-evo/ui 0.2.0 → 0.4.0

package/src/components/pagination/pagination.tsx

@@ -6,16 +6,36 @@ import {
   ChevronsRight,
   MoreHorizontal,
 } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/utils/cn';
 import { Button, type ButtonProps } from '@/components/button/button';
+import { Input } from '@/components/input/input';
+import { Select } from '@/components/select/select';
+
+// ─── 尺寸映射 — 对齐 Button/Input 的 h-7 / h-8 / h-9 三档 ──────────────────────
+
+export type PaginationSize = 'sm' | 'md' | 'lg';
+export type PaginationType = 'normal' | 'simple' | 'mini';
+
+const sizeClass: Record<PaginationSize, string> = {
+  sm: 'text-xs',
+  md: 'text-xs',
+  lg: 'text-sm',
+};
+
+const minWClass: Record<PaginationSize, string> = {
+  // sm 28px — 对齐 --button-sm-height
+  sm: 'min-w-[var(--button-sm-height)]',
+  // md 32px — 对齐 OpenTrek v4.1 --pagination-button-size
+  md: 'min-w-[var(--pagination-button-size)]',
+  // lg 36px — 仅 lg 档使用，保留 utility（无业务 token 对应）
+  lg: 'min-w-9',
+};
 
 // ─── shadcn-style primitives ──────────────────────────────────────────────────
 
-const Pagination = ({
-  className,
-  ...props
-}: React.ComponentProps<'nav'>) => (
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
     role="navigation"
     aria-label="pagination"
@@ -46,92 +66,189 @@ const PaginationItem = React.forwardRef<
 PaginationItem.displayName = 'PaginationItem';
 
 interface PaginationLinkProps
-  extends Pick<ButtonProps, 'size'>,
-    React.ComponentProps<'button'> {
+  extends Omit<ButtonProps, 'size' | 'variant' | 'shape'> {
+  /** 当前激活状态(高亮选中页)。 */
   isActive?: boolean;
+  /**
+   * 尺寸,对齐 Button/Input 三档。
+   * @default "md"
+   */
+  size?: PaginationSize;
 }
 
 const PaginationLink = ({
   className,
   isActive,
-  size = 'icon',
+  size = 'md',
   ...props
 }: PaginationLinkProps) => (
   <Button
     aria-current={isActive ? 'page' : undefined}
     variant={isActive ? 'outline' : 'ghost'}
     size={size}
-    className={cn(className)}
+    className={cn(
+      // 让数字键看起来近似方块,最小宽度 = 高度
+      minWClass[size],
+      // 数字键以 padding 收紧(等宽数字)
+      'tabular-nums',
+      isActive && 'border-primary text-primary',
+      className,
+    )}
     {...props}
   />
 );
 PaginationLink.displayName = 'PaginationLink';
 
+interface PaginationNavProps extends Omit<PaginationLinkProps, 'isActive'> {
+  /**
+   * 仅显示图标(不显示「上一页 / 下一页」文字),用于 mini 与图标条形态。
+   * @default false
+   */
+  iconOnly?: boolean;
+}
+
 const PaginationPrevious = ({
   className,
+  size = 'md',
+  iconOnly = false,
+  children,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: PaginationNavProps) => (
   <PaginationLink
     aria-label="Go to previous page"
-    size="default"
-    className={cn('gap-1 pl-2.5', className)}
+    size={size}
+    className={cn(iconOnly ? 'aspect-square px-0' : 'gap-1 px-2.5', className)}
     {...props}
   >
     <ChevronLeft className="size-4" />
-    <span>上一页</span>
+    {!iconOnly && (children ?? <span>上一页</span>)}
   </PaginationLink>
 );
 PaginationPrevious.displayName = 'PaginationPrevious';
 
 const PaginationNext = ({
   className,
+  size = 'md',
+  iconOnly = false,
+  children,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: PaginationNavProps) => (
   <PaginationLink
     aria-label="Go to next page"
-    size="default"
-    className={cn('gap-1 pr-2.5', className)}
+    size={size}
+    className={cn(iconOnly ? 'aspect-square px-0' : 'gap-1 px-2.5', className)}
     {...props}
   >
-    <span>下一页</span>
+    {!iconOnly && (children ?? <span>下一页</span>)}
     <ChevronRight className="size-4" />
   </PaginationLink>
 );
 PaginationNext.displayName = 'PaginationNext';
 
+const ellipsisVariants = cva(
+  'flex items-center justify-center text-muted-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'h-7 w-7 [&_svg]:size-3.5',
+        md: 'h-8 w-8 [&_svg]:size-4',
+        lg: 'h-9 w-9 [&_svg]:size-4',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+interface PaginationEllipsisProps
+  extends React.ComponentProps<'span'>,
+    VariantProps<typeof ellipsisVariants> {}
+
 const PaginationEllipsis = ({
   className,
+  size,
   ...props
-}: React.ComponentProps<'span'>) => (
+}: PaginationEllipsisProps) => (
   <span
     aria-hidden="true"
-    className={cn('flex size-9 items-center justify-center', className)}
+    className={cn(ellipsisVariants({ size }), className)}
     {...props}
   >
-    <MoreHorizontal className="size-4" />
+    <MoreHorizontal />
     <span className="sr-only">More pages</span>
   </span>
 );
 PaginationEllipsis.displayName = 'PaginationEllipsis';
 
-// ─── Higher-level wrapper(antd 风格 props 化分页器)───────────────────────
+// ─── 高阶 SimplePagination — antd 风格 props 化 ───────────────────────────────
 
 export interface SimplePaginationProps {
-  /** 当前页(1-based)。 */
+  /**
+   * 当前页(1-based,受控)。与 `defaultCurrent` 互斥。
+   */
   current?: number;
-  /** 受控变化回调。 */
-  onChange?: (page: number) => void;
+  /**
+   * 默认当前页(非受控)。
+   * @default 1
+   */
+  defaultCurrent?: number;
+  /**
+   * 页码 / pageSize 变化回调。第二参为变化后的 pageSize。
+   */
+  onChange?: (page: number, pageSize: number) => void;
   /** 总条数。 */
   total: number;
-  /** 每页大小。 @default 10 */
+  /**
+   * 每页大小(受控)。与 `defaultPageSize` 互斥。
+   */
   pageSize?: number;
-  /** 是否显示首末页快捷按钮。 @default false */
+  /**
+   * 默认每页大小(非受控)。
+   * @default 10
+   */
+  defaultPageSize?: number;
+  /**
+   * 每页大小可选项(用于 `pageSizeSelector`)。
+   * @default [10, 20, 50, 100]
+   */
+  pageSizeList?: number[];
+  /**
+   * 显示每页大小选择器(对齐 antd `showSizeChanger` / cloud-design `pageSizeSelector`)。
+   * @default false
+   */
+  pageSizeSelector?: boolean;
+  /** pageSize 变化回调。 */
+  onPageSizeChange?: (pageSize: number) => void;
+  /**
+   * 组件大小,对齐 Button / Input 的 sm(h-7) / md(h-8) / lg(h-9) 三档。
+   * @default "md"
+   */
+  size?: PaginationSize;
+  /**
+   * 组件类型 — `normal` 完整 / `simple` 简化(prev + 页码/总页 + next) / `mini` 极简(仅前后箭头)。
+   * @default "normal"
+   */
+  type?: PaginationType;
+  /**
+   * `normal` 类型下,显示首末页快捷按钮。
+   * @default false
+   */
   showFirstLast?: boolean;
-  /** 是否显示总数文本(antd `showTotal` 并集,简化版)。 @default true */
+  /**
+   * 显示总数文本(`mini` 类型默认不显示)。
+   * @default true
+   */
   showTotal?: boolean;
-  /** 自定义总数渲染。返回字符串或 ReactNode。 */
+  /** 自定义总数渲染。 */
   totalRender?: (total: number, range: [number, number]) => React.ReactNode;
-  /** 显示页号窗口大小(中间显示几个页号)。 @default 5 */
+  /**
+   * `normal` 类型下,显示跳转输入框。
+   * @default false
+   */
+  showJump?: boolean;
+  /**
+   * 中间显示几个页号。建议奇数。
+   * @default 5
+   */
   siblingCount?: number;
   /** 容器 className。 */
   className?: string;
@@ -139,25 +256,62 @@ export interface SimplePaginationProps {
 
 /**
  * 高阶 Pagination — antd 风格 `total / pageSize / current / onChange` props 化用法,
- * 自动计算页码窗口 + 折叠 ellipsis。
+ * 自动计算页码窗口 + 折叠 ellipsis,并支持 `size` / `type` / `pageSizeSelector` 三档语义化扩展。
  *
  * 内部组合 `Pagination / PaginationContent / PaginationItem / PaginationLink /
  * PaginationPrevious / PaginationNext / PaginationEllipsis` 这套 shadcn primitives,
  * 业务方需要更细粒度时直接使用 primitives 自行拼装。
  */
 const SimplePagination = ({
-  current = 1,
+  current,
+  defaultCurrent = 1,
   onChange,
   total,
-  pageSize = 10,
+  pageSize,
+  defaultPageSize = 10,
+  pageSizeList = [10, 20, 50, 100],
+  pageSizeSelector = false,
+  onPageSizeChange,
+  size = 'md',
+  type = 'normal',
   showFirstLast = false,
   showTotal = true,
   totalRender,
+  showJump = false,
   siblingCount = 5,
   className,
 }: SimplePaginationProps) => {
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const page = Math.min(Math.max(1, current), totalPages);
+  const [innerCurrent, setInnerCurrent] = React.useState(defaultCurrent);
+  const [innerPageSize, setInnerPageSize] = React.useState(defaultPageSize);
+
+  const finalCurrent = current ?? innerCurrent;
+  const finalPageSize = pageSize ?? innerPageSize;
+  const totalPages = Math.max(1, Math.ceil(total / finalPageSize));
+  const page = Math.min(Math.max(1, finalCurrent), totalPages);
+
+  const goto = (n: number) => {
+    if (n < 1 || n > totalPages || n === page) return;
+    if (current === undefined) setInnerCurrent(n);
+    onChange?.(n, finalPageSize);
+  };
+
+  const handlePageSizeChange = (value: string | string[]) => {
+    const raw = Array.isArray(value) ? value[0] : value;
+    const v = Number(raw);
+    if (Number.isNaN(v)) return;
+    if (pageSize === undefined) setInnerPageSize(v);
+    if (current === undefined) setInnerCurrent(1);
+    onPageSizeChange?.(v);
+    onChange?.(1, v);
+  };
+
+  const [jumperVal, setJumperVal] = React.useState('');
+  const handleJumpKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    const v = Number(jumperVal);
+    if (Number.isFinite(v)) goto(v);
+    setJumperVal('');
+  };
 
   const pages = React.useMemo(() => {
     const half = Math.floor(siblingCount / 2);
@@ -171,39 +325,106 @@ const SimplePagination = ({
     return arr;
   }, [page, siblingCount, totalPages]);
 
-  const goto = (n: number) => {
-    if (n < 1 || n > totalPages || n === page) return;
-    onChange?.(n);
-  };
+  const rangeStart = total === 0 ? 0 : (page - 1) * finalPageSize + 1;
+  const rangeEnd = Math.min(page * finalPageSize, total);
 
-  const rangeStart = total === 0 ? 0 : (page - 1) * pageSize + 1;
-  const rangeEnd = Math.min(page * pageSize, total);
+  const showLeftEllipsis = (pages[0] ?? 1) > 2;
+  const showRightEllipsis =
+    (pages[pages.length - 1] ?? totalPages) < totalPages - 1;
 
-  const showLeftEllipsis = pages[0]! > 2;
-  const showRightEllipsis = pages[pages.length - 1]! < totalPages - 1;
+  // ─── 总数文本(mini 类型默认隐藏)─────────────────────────────────────────
+  const totalNode =
+    showTotal && type !== 'mini' ? (
+      <p className={cn('text-muted-foreground tabular-nums', sizeClass[size])}>
+        {totalRender
+          ? totalRender(total, [rangeStart, rangeEnd])
+          : `共 ${total} 条 · 第 ${rangeStart}-${rangeEnd} 条`}
+      </p>
+    ) : (
+      <span />
+    );
 
-  return (
-    <div
-      className={cn(
-        'flex w-full flex-wrap items-center justify-between gap-3',
-        className,
-      )}
-    >
-      {showTotal ? (
-        <p className="text-sm text-muted-foreground tabular-nums">
-          {totalRender
-            ? totalRender(total, [rangeStart, rangeEnd])
-            : `共 ${total} 条 · 第 ${rangeStart}-${rangeEnd} 条`}
-        </p>
-      ) : (
-        <span />
-      )}
+  // ─── 主体内容 ────────────────────────────────────────────────────────────
+  let body: React.ReactNode;
+
+  if (type === 'mini') {
+    body = (
+      <Pagination className="mx-0 w-auto">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              size={size}
+              iconOnly
+              disabled={page === 1}
+              onClick={() => goto(page - 1)}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <span
+              className={cn(
+                'px-2 tabular-nums text-muted-foreground',
+                sizeClass[size],
+              )}
+            >
+              {page} / {totalPages}
+            </span>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext
+              size={size}
+              iconOnly
+              disabled={page === totalPages}
+              onClick={() => goto(page + 1)}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  } else if (type === 'simple') {
+    body = (
+      <Pagination className="mx-0 w-auto">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              size={size}
+              iconOnly
+              disabled={page === 1}
+              onClick={() => goto(page - 1)}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <span
+              className={cn(
+                'flex items-center gap-1 px-2 tabular-nums',
+                sizeClass[size],
+              )}
+            >
+              <strong className="text-foreground">{page}</strong>
+              <span className="text-muted-foreground">/</span>
+              <span className="text-muted-foreground">{totalPages}</span>
+            </span>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext
+              size={size}
+              iconOnly
+              disabled={page === totalPages}
+              onClick={() => goto(page + 1)}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  } else {
+    body = (
       <Pagination className="mx-0 w-auto">
         <PaginationContent>
           {showFirstLast ? (
             <PaginationItem>
               <PaginationLink
                 aria-label="First"
+                size={size}
+                className="aspect-square px-0"
                 disabled={page === 1}
                 onClick={() => goto(1)}
               >
@@ -213,23 +434,28 @@ const SimplePagination = ({
           ) : null}
           <PaginationItem>
             <PaginationPrevious
+              size={size}
+              iconOnly
               disabled={page === 1}
               onClick={() => goto(page - 1)}
             />
           </PaginationItem>
-          {pages[0]! > 1 ? (
+          {(pages[0] ?? 1) > 1 ? (
             <PaginationItem>
-              <PaginationLink onClick={() => goto(1)}>1</PaginationLink>
+              <PaginationLink size={size} onClick={() => goto(1)}>
+                1
+              </PaginationLink>
             </PaginationItem>
           ) : null}
           {showLeftEllipsis ? (
             <PaginationItem>
-              <PaginationEllipsis />
+              <PaginationEllipsis size={size} />
             </PaginationItem>
           ) : null}
           {pages.map((p) => (
             <PaginationItem key={p}>
               <PaginationLink
+                size={size}
                 isActive={p === page}
                 onClick={() => goto(p)}
               >
@@ -239,18 +465,20 @@ const SimplePagination = ({
           ))}
           {showRightEllipsis ? (
             <PaginationItem>
-              <PaginationEllipsis />
+              <PaginationEllipsis size={size} />
             </PaginationItem>
           ) : null}
-          {pages[pages.length - 1]! < totalPages ? (
+          {(pages[pages.length - 1] ?? totalPages) < totalPages ? (
             <PaginationItem>
-              <PaginationLink onClick={() => goto(totalPages)}>
+              <PaginationLink size={size} onClick={() => goto(totalPages)}>
                 {totalPages}
               </PaginationLink>
             </PaginationItem>
           ) : null}
           <PaginationItem>
             <PaginationNext
+              size={size}
+              iconOnly
               disabled={page === totalPages}
               onClick={() => goto(page + 1)}
             />
@@ -259,6 +487,8 @@ const SimplePagination = ({
             <PaginationItem>
               <PaginationLink
                 aria-label="Last"
+                size={size}
+                className="aspect-square px-0"
                 disabled={page === totalPages}
                 onClick={() => goto(totalPages)}
               >
@@ -268,6 +498,58 @@ const SimplePagination = ({
           ) : null}
         </PaginationContent>
       </Pagination>
+    );
+  }
+
+  // ─── 附加 — pageSize 选择器 / 跳转(仅 normal)─────────────────────────────
+  const showAddons = type === 'normal' && (pageSizeSelector || showJump);
+
+  const selectSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md';
+
+  const addons = showAddons ? (
+    <div className={cn('flex items-center gap-2', sizeClass[size])}>
+      {pageSizeSelector ? (
+        <Select
+          aria-label="每页显示"
+          size={selectSize}
+          value={String(finalPageSize)}
+          onChange={handlePageSizeChange}
+          options={pageSizeList.map((opt) => ({
+            label: `${opt} 条/页`,
+            value: String(opt),
+          }))}
+        />
+      ) : null}
+      {showJump ? (
+        <span className="inline-flex items-center gap-1 text-muted-foreground">
+          前往
+          <Input
+            size={selectSize}
+            inputMode="numeric"
+            value={jumperVal}
+            onChange={(e) => setJumperVal(e.target.value)}
+            onKeyDown={handleJumpKey}
+            className="w-12 text-center tabular-nums"
+            aria-label="跳转到页"
+          />
+          页
+        </span>
+      ) : null}
+    </div>
+  ) : null;
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-wrap items-center justify-between gap-3',
+        className,
+      )}
+    >
+      {totalNode}
+      <div className="flex flex-wrap items-center gap-3">
+        {body}
+        {addons}
+      </div>
     </div>
   );
 };

package/src/components/popconfirm/popconfirm.meta.md

@@ -27,37 +27,34 @@ displayName: 气泡确认
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称           | 类型                          | 默认值      | 必填 | 说明                                                                |
-| -------------- | ----------------------------- | ----------- | ---- | ------------------------------------------------------------------- |
-| `children`     | `React.ReactElement`          | –           | ✓    | 触发节点(通常是 Button / a)。                                       |
-| `title`        | `React.ReactNode`             | –           | ✓    | 主标题(antd `title` 并集)。                                         |
-| `description`  | `React.ReactNode`             | –           | –    | 副描述(antd `description` 并集) — 解释操作后果。                    |
-| `icon`         | `React.ReactNode`             | –           | –    | 触发图标(antd `icon` 并集) — 默认警示图标。                         |
-| `okText`       | `string`                      | `"确定"`    | –    | 确认按钮文本(antd `okText` 并集)。                                  |
-| `cancelText`   | `string`                      | `"取消"`    | –    | 取消按钮文本(antd `cancelText` 并集)。                              |
-| `okType`       | `'default' \| 'destructive'`  | `"default"` | –    | 确认按钮 variant(antd `okType` 并集) — 危险操作请用 `destructive`。 |
-| `onConfirm`    | `() => void \| Promise<void>` | –           | –    | 确认回调。                                                          |
-| `onCancel`     | `() => void`                  | –           | –    | 取消回调。                                                          |
-| `open`         | `boolean`                     | –           | –    | 受控 open(antd `open` 并集) — 不传时本组件自管 open 状态。          |
-| `onOpenChange` | `(next: boolean) => void`     | –           | –    | open 变化回调。                                                     |
-| `disabled`     | `boolean`                     | –           | –    | 禁用(子节点点击不弹出)。                                            |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `children` | `React.ReactElement` | – | ✓ | 触发节点(通常是 Button / a)。 |
+| `title` | `React.ReactNode` | – | ✓ | 主标题(antd `title` 并集)。 |
+| `description` | `React.ReactNode` | – | – | 副描述(antd `description` 并集) — 解释操作后果。 |
+| `icon` | `React.ReactNode` | – | – | 触发图标(antd `icon` 并集) — 默认警示图标。 |
+| `okText` | `string` | `"确定"` | – | 确认按钮文本(antd `okText` 并集)。 |
+| `cancelText` | `string` | `"取消"` | – | 取消按钮文本(antd `cancelText` 并集)。 |
+| `okType` | `'default' \| 'destructive'` | `"default"` | – | 确认按钮 variant(antd `okType` 并集) — 危险操作请用 `destructive`。 |
+| `onConfirm` | `() => void \| Promise<void>` | – | – | 确认回调。 |
+| `onCancel` | `() => void` | – | – | 取消回调。 |
+| `open` | `boolean` | – | – | 受控 open(antd `open` 并集) — 不传时本组件自管 open 状态。 |
+| `onOpenChange` | `(next: boolean) => void` | – | – | open 变化回调。 |
+| `disabled` | `boolean` | – | – | 禁用(子节点点击不弹出)。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add popconfirm` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry     | 类型      | 描述                                                                                    |
-| --------- | --------- | --------------------------------------------------------------------------------------- |
-| `cn`      | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                      |
-| `button`  | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
-| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集                                            |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
+| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集,使用 showArrow 控制尖角(与 Tooltip / HoverCard 命名统一) |
 
 ### npm 依赖
 
@@ -66,7 +63,6 @@ displayName: 气泡确认
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/popconfirm/popconfirm.stories.tsx

@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { RefreshCcw } from 'lucide-react';
 import { Popconfirm } from './popconfirm';
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof Popconfirm> = {
-  title: '反馈与浮层 · Feedback/Popconfirm',
+  title: '反馈 · Feedback/Popconfirm',
   component: Popconfirm,
   tags: ['autodocs'],
   parameters: {

package/src/components/popconfirm/popconfirm.tsx

@@ -98,7 +98,7 @@ const Popconfirm: React.FC<PopconfirmProps> = ({
             {icon ?? <AlertCircle className="size-4" />}
           </span>
           <div className="min-w-0 flex-1">
-            <div className="text-sm font-medium">{title}</div>
+            <div className="text-xs font-medium">{title}</div>
             {description ? (
               <div className={cn('mt-1 text-xs text-muted-foreground')}>
                 {description}