@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/resizable/resizable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   ResizablePanelGroup,
   ResizablePanel,
@@ -6,7 +6,7 @@ import {
 } from './resizable';
 
 const meta: Meta<typeof ResizablePanelGroup> = {
-  title: '布局与容器 · Layout/Resizable',
+  title: '布局 · Layout/Resizable',
   component: ResizablePanelGroup,
   tags: ['autodocs'],
   parameters: {
@@ -26,7 +26,7 @@ export const Horizontal: Story = {
   render: () => (
     <ResizablePanelGroup
       direction="horizontal"
-      className="min-h-[300px] w-[600px] rounded-lg border"
+      className="min-h-[300px] w-[600px] rounded-lg border border-border"
     >
       <ResizablePanel defaultSize={30} minSize={20}>
         <div className="flex h-full items-center justify-center p-6">
@@ -48,7 +48,7 @@ export const Vertical: Story = {
   render: () => (
     <ResizablePanelGroup
       direction="vertical"
-      className="min-h-[400px] w-[400px] rounded-lg border"
+      className="min-h-[400px] w-[400px] rounded-lg border border-border"
     >
       <ResizablePanel defaultSize={70}>
         <div className="flex h-full items-center justify-center p-6 text-sm">
@@ -70,7 +70,7 @@ export const Nested: Story = {
   render: () => (
     <ResizablePanelGroup
       direction="horizontal"
-      className="min-h-[400px] w-[700px] rounded-lg border"
+      className="min-h-[400px] w-[700px] rounded-lg border border-border"
     >
       <ResizablePanel defaultSize={20} minSize={15}>
         <div className="flex h-full items-center justify-center p-4 text-sm">

package/src/components/resizable/resizable.tsx

@@ -45,7 +45,7 @@ const ResizableHandle = ({
     {...props}
   >
     {withHandle ? (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border">
         <GripVertical className="size-2.5" />
       </div>
     ) : null}

package/src/components/result/result.meta.md

@@ -28,28 +28,25 @@ displayName: 结果页
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称       | 类型              | 默认值   | 必填 | 说明                                                                       |
-| ---------- | ----------------- | -------- | ---- | -------------------------------------------------------------------------- |
-| `status`   | `ResultStatus`    | `"info"` | –    | 状态类型 — 决定默认图标和配色;`404 / 403 / 500` 显示大字号错误码代替图标。 |
-| `icon`     | `React.ReactNode` | –        | –    | 自定义图标(覆盖默认)。                                                     |
-| `title`    | `React.ReactNode` | –        | –    | 标题。                                                                     |
-| `subTitle` | `React.ReactNode` | –        | –    | 副标题(描述)。                                                             |
-| `extra`    | `React.ReactNode` | –        | –    | 操作区(放 Button)。                                                        |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `status` | `ResultStatus` | `"info"` | – | 状态类型 — 决定默认图标和配色;`404 / 403 / 500` 显示大字号错误码代替图标。 |
+| `icon` | `React.ReactNode` | – | – | 自定义图标(覆盖默认)。 |
+| `title` | `React.ReactNode` | – | – | 标题。 |
+| `subTitle` | `React.ReactNode` | – | – | 副标题(描述)。 |
+| `extra` | `React.ReactNode` | – | – | 操作区(放 Button)。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add result` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -58,7 +55,6 @@ displayName: 结果页
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/result/result.stories.tsx

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

package/src/components/result/result.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
-import {
-  AlertCircle,
-  CheckCircle2,
-  Info,
-  XCircle,
-} from 'lucide-react';
+import { AlertCircle, CheckCircle2, Info, XCircle } from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
-export type ResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
+export type ResultStatus =
+  | 'success'
+  | 'error'
+  | 'info'
+  | 'warning'
+  | '404'
+  | '403'
+  | '500';
 
 const iconMap = {
   success: { Icon: CheckCircle2, color: 'text-success' },
@@ -45,7 +47,16 @@ export interface ResultProps
 
 const Result = React.forwardRef<HTMLDivElement, ResultProps>(
   (
-    { status = 'info', icon, title, subTitle, extra, className, children, ...props },
+    {
+      status = 'info',
+      icon,
+      title,
+      subTitle,
+      extra,
+      className,
+      children,
+      ...props
+    },
     ref,
   ) => {
     const { Icon, color } = iconMap[status];
@@ -68,11 +79,9 @@ const Result = React.forwardRef<HTMLDivElement, ResultProps>(
         ) : (
           <Icon className={cn('size-16', color)} aria-hidden="true" />
         )}
-        {title ? (
-          <h2 className="text-2xl font-semibold">{title}</h2>
-        ) : null}
+        {title ? <h2 className="text-2xl font-semibold">{title}</h2> : null}
         {subTitle ? (
-          <p className="max-w-prose text-sm text-muted-foreground">
+          <p className="max-w-prose text-xs text-muted-foreground">
             {subTitle}
           </p>
         ) : null}

package/src/components/scroll-area/scroll-area.meta.md

@@ -3,7 +3,7 @@ id: scroll-area
 name: ScrollArea
 displayName: 滚动区域
 type: component
-category: layout
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -29,9 +29,7 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-
 _(no props)_
-
 <!-- auto:props:end -->
 
 ## 依赖
@@ -39,14 +37,13 @@ _(no props)_
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add scroll-area` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -55,7 +52,6 @@ _(no props)_
 ```bash
 pnpm add @radix-ui/react-scroll-area@^1.2.0
 ```
-
 <!-- auto:deps:end -->
 
 > 子组件:`ScrollArea`(主容器,内置 Viewport + ScrollBar 组合)/ `ScrollBar`(独立 ScrollBar,需要自定义双向滚动时使用)。

package/src/components/scroll-area/scroll-area.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ScrollArea, ScrollBar } from './scroll-area';
 
 const meta: Meta<typeof ScrollArea> = {
-  title: '布局与容器 · Layout/ScrollArea',
+  title: '废弃 · Deprecated/ScrollArea',
   component: ScrollArea,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '自定义滚动容器 — 基于 Radix ScrollArea,跨浏览器一致的滚动条样式 + 触屏友好 + 自动隐藏 thumb。shadcn 专有,antd 用原生滚动。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n自定义滚动容器 — 基于 Radix ScrollArea,跨浏览器一致的滚动条样式 + 触屏友好 + 自动隐藏 thumb。shadcn 专有,antd 用原生滚动。',
       },
     },
   },
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof ScrollArea>;
 
 export const Vertical: Story = {
   render: () => (
-    <ScrollArea className="h-72 w-48 rounded-md border p-4">
+    <ScrollArea className="h-72 w-48 rounded-md border border-border p-4">
       {Array.from({ length: 50 }).map((_, i) => (
         <div key={i} className="py-1 text-sm">
           第 {i + 1} 行
@@ -32,7 +32,7 @@ export const Vertical: Story = {
 
 export const Horizontal: Story = {
   render: () => (
-    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border border-border">
       <div className="flex w-max gap-4 p-4">
         {Array.from({ length: 12 }).map((_, i) => (
           <div

package/src/components/segmented/segmented.meta.md

@@ -2,7 +2,7 @@
 id: segmented
 name: Segmented
 type: component
-category: form
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 displayName: 分段控制器
@@ -12,6 +12,8 @@ displayName: 分段控制器
 
 分段控制器 — antd 独有补足。**等价 antd `Segmented`**(v5.0+)。视觉类似 iOS/macOS 系统 Segmented Control,强调**互斥单选 + 紧凑紧贴**(日 / 周 / 月、列表 / 网格、明 / 暗主题切换)。
 
+> ⚠️ **后续废弃计划**(Task #10 后能力合并):本组件能力已被 `Tabs` 的 `variant="capsule"` + `size` 完全吸收。新项目推荐直接用 [`Tabs`](../tabs/tabs.meta.md) `variant="capsule"`。**本 entry 本轮不删**(防止存量业务 import 断裂),下一个 major 评估迁移进度后从 manifest 下架。
+
 ## When to use
 
 - 视图切换(列表 / 网格 / 时间轴)
@@ -25,28 +27,25 @@ displayName: 分段控制器
 - 选项超过 6 个 → 改用 `Select` / `Tabs`
 
 <!-- auto:props:begin -->
-
-| 名称           | 类型                        | 默认值      | 必填 | 说明                                    |
-| -------------- | --------------------------- | ----------- | ---- | --------------------------------------- |
-| `options`      | `SegmentedOption[]`         | –           | ✓    | 候选项数组。                            |
-| `value`        | `string`                    | –           | –    | 受控 value。                            |
-| `defaultValue` | `string`                    | –           | –    | uncontrolled 初值。                     |
-| `onChange`     | `(value: string) => void`   | –           | –    | value 变化回调。                        |
-| `size`         | `'sm' \| 'default' \| 'lg'` | `"default"` | –    | 尺寸。                                  |
-| `block`        | `boolean`                   | `false`     | –    | 是否撑满父容器宽度(antd `block` 并集)。 |
-| `disabled`     | `boolean`                   | –           | –    | 整组禁用。                              |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `options` | `SegmentedOption[]` | – | ✓ | 候选项数组。 |
+| `value` | `string` | – | – | 受控 value。 |
+| `defaultValue` | `string` | – | – | uncontrolled 初值。 |
+| `onChange` | `(value: string) => void` | – | – | value 变化回调。 |
+| `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"default"` | – | 尺寸。 |
+| `block` | `boolean` | `false` | – | 是否撑满父容器宽度(antd `block` 并集)。 |
+| `disabled` | `boolean` | – | – | 整组禁用。 |
 <!-- auto:props:end -->
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add segmented` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -55,7 +54,6 @@ displayName: 分段控制器
 ```bash
 pnpm add class-variance-authority@^0.7.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/segmented/segmented.stories.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Calendar, LayoutGrid, List } from 'lucide-react';
 import { Segmented } from './segmented';
 
 const meta: Meta<typeof Segmented> = {
-  title: '表单与输入 · Form/Segmented',
+  title: '废弃 · Deprecated/Segmented',
   component: Segmented,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '分段控制器 — iOS / macOS 风格的紧凑互斥单选（视图切换、时间区间、主题档）。等价 antd `Segmented`（v5.0+），与 ToggleGroup 互补（后者偏工具栏多选）。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n分段控制器 — iOS / macOS 风格的紧凑互斥单选（视图切换、时间区间、主题档）。等价 antd `Segmented`（v5.0+），与 ToggleGroup 互补（后者偏工具栏多选）。',
       },
     },
   },

package/src/components/segmented/segmented.tsx

@@ -9,12 +9,13 @@ const segmentedVariants = cva(
     variants: {
       size: {
         sm: 'h-8 text-xs',
-        default: 'h-9 text-sm',
-        lg: 'h-10 text-base',
+        md: 'h-9 text-xs',
+        default: 'h-9 text-xs',
+        lg: 'h-10 text-sm',
       },
       block: { true: 'w-full', false: 'w-fit' },
     },
-    defaultVariants: { size: 'default', block: false },
+    defaultVariants: { size: 'md', block: false },
   },
 );
 
@@ -48,7 +49,10 @@ export interface SegmentedOption {
 }
 
 export interface SegmentedProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>,
+  extends Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      'onChange' | 'defaultValue'
+    >,
     VariantProps<typeof segmentedVariants> {
   /** 候选项数组。 */
   options: SegmentedOption[];
@@ -62,7 +66,7 @@ export interface SegmentedProps
    * 尺寸。
    * @default "default"
    */
-  size?: 'sm' | 'default' | 'lg';
+  size?: 'sm' | 'md' | 'default' | 'lg';
   /**
    * 是否撑满父容器宽度(antd `block` 并集)。
    * @default false
@@ -122,9 +126,13 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
               aria-checked={active}
               disabled={itemDisabled}
               onClick={() => !itemDisabled && select(opt.value)}
-              className={cn(itemVariants({ active, disabled: itemDisabled, block }))}
+              className={cn(
+                itemVariants({ active, disabled: itemDisabled, block }),
+              )}
             >
-              {opt.icon ? <span className="inline-flex">{opt.icon}</span> : null}
+              {opt.icon ? (
+                <span className="inline-flex">{opt.icon}</span>
+              ) : null}
               {opt.label}
             </button>
           );