@teamix-evo/ui 0.1.1 → 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,14 +6,14 @@ import {
 } from './resizable';
 
 const meta: Meta<typeof ResizablePanelGroup> = {
-  title: '布局与容器 · Layout/Resizable',
+  title: '布局 · Layout/Resizable',
   component: ResizablePanelGroup,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '可拖拽分栏 — 编辑器 / 桌面应用风格(VS Code、Figma)。基于 react-resizable-panels,支持横/纵向、嵌套、min/max 限制、握把可视化。OpenTrek tokens 适配。',
+          '可拖拽分栏 — 编辑器 / 桌面应用风格(VS Code、Figma)。基于 react-resizable-panels,支持横/纵向、嵌套、min/max 限制、握把可视化。',
       },
     },
   },
@@ -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

@@ -4,10 +4,11 @@ name: Result
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 结果页
 ---
 
-# Result
+# Result 结果页
 
 结果页 — antd 独有补足。**整页级反馈**:操作成功、失败、404、403、500 等场景的居中状态页(图标 + 标题 + 副标题 + 操作区)。
 
@@ -24,6 +25,8 @@ package: "@teamix-evo/ui"
 - 短暂消息 → `Sonner`
 - 阻断式确认 → `AlertDialog`
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
@@ -34,6 +37,8 @@ package: "@teamix-evo/ui"
 | `extra` | `React.ReactNode` | – | – | 操作区(放 Button)。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 

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

@@ -1,16 +1,16 @@
-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: {
     docs: {
       description: {
         component:
-          '结果页 — 整页级反馈(成功 / 失败 / 404 / 403 / 500)。图标 + 标题 + 副标题 + 操作区,自动配色。OpenTrek tokens 适配,等价 antd Result。',
+          '结果页 — 整页级反馈（成功 / 失败 / 404 / 403 / 500）。图标 + 标题 + 副标题 + 操作区，自动配色。等价 antd Result。',
       },
     },
   },
@@ -62,10 +62,6 @@ export const NotFound: Story = {
 export const Forbidden: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <Result
-      status="403"
-      title="无权访问"
-      subTitle="联系管理员申请访问权限。"
-    />
+    <Result status="403" title="无权访问" subTitle="联系管理员申请访问权限。" />
   ),
 };

package/src/components/result/result.tsx

@@ -1,20 +1,22 @@
 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-emerald-500' },
+  success: { Icon: CheckCircle2, color: 'text-success' },
   error: { Icon: XCircle, color: 'text-destructive' },
-  info: { Icon: Info, color: 'text-blue-500' },
-  warning: { Icon: AlertCircle, color: 'text-amber-500' },
+  info: { Icon: Info, color: 'text-info' },
+  warning: { Icon: AlertCircle, color: 'text-warning' },
   '404': { Icon: AlertCircle, color: 'text-muted-foreground' },
   '403': { Icon: AlertCircle, color: 'text-muted-foreground' },
   '500': { Icon: AlertCircle, color: 'text-destructive' },
@@ -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

@@ -1,13 +1,14 @@
 ---
 id: scroll-area
 name: ScrollArea
+displayName: 滚动区域
 type: component
-category: layout
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# ScrollArea
+# ScrollArea 滚动区域
 
 自定义滚动容器 — Radix ScrollArea。**shadcn-only**(antd 用原生滚动)。
 **核心价值**:跨浏览器一致的滚动条样式 + 触屏友好 + 自动隐藏 thumb。

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

@@ -1,10 +1,18 @@
-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:
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n自定义滚动容器 — 基于 Radix ScrollArea,跨浏览器一致的滚动条样式 + 触屏友好 + 自动隐藏 thumb。shadcn 专有,antd 用原生滚动。',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -12,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} 行
@@ -24,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/scroll-area/scroll-area.tsx

@@ -15,7 +15,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-inherit">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
@@ -36,9 +36,9 @@ const ScrollBar = React.forwardRef<
     className={cn(
       'flex touch-none select-none transition-colors',
       orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+        'h-full w-2.5 border-l border-l-transparent p-px',
       orientation === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+        'h-2.5 flex-col border-t border-t-transparent p-px',
       className,
     )}
     {...props}

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

@@ -2,15 +2,18 @@
 id: segmented
 name: Segmented
 type: component
-category: form
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 分段控制器
 ---
 
-# Segmented
+# Segmented 分段控制器
 
 分段控制器 — 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
 
 - 视图切换(列表 / 网格 / 时间轴)
@@ -30,7 +33,7 @@ package: "@teamix-evo/ui"
 | `value` | `string` | – | – | 受控 value。 |
 | `defaultValue` | `string` | – | – | uncontrolled 初值。 |
 | `onChange` | `(value: string) => void` | – | – | value 变化回调。 |
-| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 尺寸。 |
+| `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"default"` | – | 尺寸。 |
 | `block` | `boolean` | `false` | – | 是否撑满父容器宽度(antd `block` 并集)。 |
 | `disabled` | `boolean` | – | – | 整组禁用。 |
 <!-- auto:props:end -->

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 互补(后者偏工具栏多选)。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n分段控制器 — iOS / macOS 风格的紧凑互斥单选（视图切换、时间区间、主题档）。等价 antd `Segmented`（v5.0+），与 ToggleGroup 互补（后者偏工具栏多选）。',
       },
     },
   },
@@ -49,9 +49,17 @@ export const WithIcons: Story = {
         value={v}
         onChange={setV}
         options={[
-          { value: 'grid', label: '网格', icon: <LayoutGrid className="size-4" /> },
+          {
+            value: 'grid',
+            label: '网格',
+            icon: <LayoutGrid className="size-4" />,
+          },
           { value: 'list', label: '列表', icon: <List className="size-4" /> },
-          { value: 'cal', label: '日历', icon: <Calendar className="size-4" /> },
+          {
+            value: 'cal',
+            label: '日历',
+            icon: <Calendar className="size-4" />,
+          },
         ]}
       />
     );
@@ -79,9 +87,30 @@ export const Sizes: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex flex-col items-start gap-3">
-      <Segmented size="sm" defaultValue="a" options={[{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }]} />
-      <Segmented size="default" defaultValue="a" options={[{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }]} />
-      <Segmented size="lg" defaultValue="a" options={[{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }]} />
+      <Segmented
+        size="sm"
+        defaultValue="a"
+        options={[
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ]}
+      />
+      <Segmented
+        size="default"
+        defaultValue="a"
+        options={[
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ]}
+      />
+      <Segmented
+        size="lg"
+        defaultValue="a"
+        options={[
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ]}
+      />
     </div>
   ),
 };

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>
           );