@ptengine/design-components 0.5.1 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptengine/design-components",
-    "version": "0.5.1",
+    "version": "0.5.3",
     "description": "PT-AI-Components — PTEngine 基于 shadcn/ui 的 React 组件库",
     "license": "UNLICENSED",
     "private": false,

package/src/components/ui/prompt-picker.tsx

@@ -63,6 +63,21 @@ export interface PromptPickerItem {
      * **只支持两层,不要做递归多层。**
      */
     children?: PromptPickerItem[];
+    /**
+     * 可选:条目右端的小徽标,如「即将上线」。**只放短枚举**(1-4 字),它是给整条加限定,
+     * 不是第二行说明 —— 长说明走 `hint`(悬停)。
+     *
+     * 用扁平 chip(`rounded-sm bg-muted`)而不是库的 `Badge` 组件:后者是
+     * `rounded-full font-semibold` 胶囊,在 32px 高的条目里显得过重,且 lin 已裁定
+     * Badge 只留给短枚举场景的独立标签。此处写法与 apps/x 的 ⋮ 菜单出口组一致。
+     */
+    badge?: string;
+    /**
+     * 可选:该条不可选(常与 `badge: '即将上线'` 搭配)。
+     * 整条降到辅助色、不响应点击、不进 Tab 序,也不给 hover 反馈 ——
+     * **点了没反应比灰着更伤**,所以连状态层都不挂。
+     */
+    disabled?: boolean;
     /**
      * 可选图标。⚠️ **一组条目全用同一个图标时不要传** —— 它不携带任何用于选择的信息,
      * 只会在每行左边留一段空白。只有各条图标不同、且图标在编码类别时才传。
@@ -124,6 +139,16 @@ const CHIP_IDLE =
     'state-layer [--pt-state-layer-border:1px] border-input bg-background text-foreground ' +
     'hover:border-neutral';
 
+/* 未上线/不可选的条目:整条降辅助色,**不挂 state-layer、不给 hover** ——
+   灰着不给反馈,好过给了反馈却什么都不发生。 */
+const CHIP_DISABLED = 'border-input bg-background text-[rgb(var(--pt-text-tage))]';
+
+/* 条目右端的小徽标。扁平 chip,不是库 Badge(理由见 PromptPickerItem.badge 的注释)。
+   11px/16 是辅助字号档,比条目正文 13px 低一档,不与之争夺注意力。 */
+const CHIP_BADGE =
+    'ml-[8px] shrink-0 whitespace-nowrap rounded-[var(--pt-radius-sm)] bg-muted ' +
+    'px-[6px] text-[11px] leading-[16px] text-[rgb(var(--pt-text-tage))]';
+
 /* 第二层顶部的分类项 —— 面包屑,不是选中态(见头注释规则 2)。
    持久态底色 = 中性 8%(库规范:选中/激活用 --pt-bg-selected,不用彩色);
    它自己不可点,所以不挂 state-layer。 */
@@ -221,18 +246,40 @@ const PromptPicker = React.forwardRef<HTMLDivElement, PromptPickerProps>(
                             {lead}
                         </p>
                     )}
-                    {visibleItems.map(item => (
-                        <button
-                            key={item.id}
-                            type="button"
-                            title={item.hint ?? item.label}
-                            onClick={() => handleChipClick(item)}
-                            className={cn(CHIP_BASE, CHIP_IDLE)}
-                        >
-                            {item.icon}
-                            <span className="min-w-0 truncate">{item.label}</span>
-                        </button>
-                    ))}
+                    {visibleItems.map(item =>
+                        item.disabled ? (
+                            /* 不可选:用 div + aria-disabled,不是 <button disabled> ——
+                               后者仍会被读屏念成「命令,已禁用」且占 Tab 序。
+                               有 badge 时 label 撑开、badge 贴右;无 badge 时不加 flex-1,
+                               胶囊仍按内容收窄(不撑满)。 */
+                            <div
+                                key={item.id}
+                                aria-disabled="true"
+                                title={item.hint ?? item.label}
+                                className={cn(CHIP_BASE, CHIP_DISABLED)}
+                            >
+                                {item.icon}
+                                <span className={cn('min-w-0 truncate', item.badge && 'flex-1')}>
+                                    {item.label}
+                                </span>
+                                {item.badge && <span className={CHIP_BADGE}>{item.badge}</span>}
+                            </div>
+                        ) : (
+                            <button
+                                key={item.id}
+                                type="button"
+                                title={item.hint ?? item.label}
+                                onClick={() => handleChipClick(item)}
+                                className={cn(CHIP_BASE, CHIP_IDLE)}
+                            >
+                                {item.icon}
+                                <span className={cn('min-w-0 truncate', item.badge && 'flex-1')}>
+                                    {item.label}
+                                </span>
+                                {item.badge && <span className={CHIP_BADGE}>{item.badge}</span>}
+                            </button>
+                        )
+                    )}
                 </div>
             </div>
         );