From 06f94325216aaeeb605fbc1d0eb1dfe206bb6e17 Mon Sep 17 00:00:00 2001
From: tianshen <tian.shen@goodpatch.com>
Date: Thu, 16 Apr 2026 11:38:10 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(tabs):=20MotionPreview=20?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=83=BC=E3=83=AA=E3=83=BC=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- solid と line バリアントを並べたモーション確認用 MotionPreview を追加
- コンテンツ fade-in（200ms ease-out）と line インジケータースライド（250ms cubic-bezier(0.16,1,0.3,1)）の仕様を description に記載

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/ui/tabs/index.stories.tsx | 48 ++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/components/ui/tabs/index.stories.tsx b/src/components/ui/tabs/index.stories.tsx
index ba87258..ff9e26e 100644
--- a/src/components/ui/tabs/index.stories.tsx
+++ b/src/components/ui/tabs/index.stories.tsx
@@ -75,6 +75,54 @@ export const Scrollable: TabsListVariantStory = {
   ),
 };
 
+/**
+ * コンテンツ切り替え fade-in と line インジケータースライドの確認用。
+ * en: For verifying content fade-in and line indicator slide motion.
+ */
+export const MotionPreview: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "タブを切り替えてモーションを確認する。上段：solid / ghost（コンテンツ fade-in のみ）。下段：line（コンテンツ fade-in + インジケータースライド）。\n\n**コンテンツ**：opacity(0)+translateY(6px)→opacity(1)+translateY(0)、200ms ease-out。\n**line インジケーター**：アクティブタブの位置・幅に追従してスライド、250ms cubic-bezier(0.16,1,0.3,1)。\n\nen: Switch tabs to verify motion. Top: solid/ghost (content fade-in only). Bottom: line (content fade-in + indicator slide). Content: opacity(0)+translateY(6px)→(1)+0, 200ms ease-out. Line indicator: slides to active tab position/width, 250ms cubic-bezier(0.16,1,0.3,1).",
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-10 w-[400px]">
+      {/* solid */}
+      <div className="flex flex-col gap-1">
+        <p className="text-xs text-neutral-500 font-medium">solid</p>
+        <Tabs defaultValue="a">
+          <TabsList variant="solid">
+            <TabsTrigger value="a">アカウント</TabsTrigger>
+            <TabsTrigger value="b">通知</TabsTrigger>
+            <TabsTrigger value="c">セキュリティ</TabsTrigger>
+          </TabsList>
+          <TabsContent value="a"><p className="py-4 character-3-regular-pro text-text-medium">アカウント設定の内容がここに入ります。</p></TabsContent>
+          <TabsContent value="b"><p className="py-4 character-3-regular-pro text-text-medium">通知設定の内容がここに入ります。</p></TabsContent>
+          <TabsContent value="c"><p className="py-4 character-3-regular-pro text-text-medium">セキュリティ設定の内容がここに入ります。</p></TabsContent>
+        </Tabs>
+      </div>
+
+      {/* line */}
+      <div className="flex flex-col gap-1">
+        <p className="text-xs text-neutral-500 font-medium">line — インジケータースライド確認</p>
+        <Tabs defaultValue="x">
+          <TabsList variant="line">
+            <TabsTrigger value="x">アカウント</TabsTrigger>
+            <TabsTrigger value="y">通知</TabsTrigger>
+            <TabsTrigger value="z">セキュリティ</TabsTrigger>
+          </TabsList>
+          <TabsContent value="x"><p className="py-4 character-3-regular-pro text-text-medium">アカウント設定の内容がここに入ります。</p></TabsContent>
+          <TabsContent value="y"><p className="py-4 character-3-regular-pro text-text-medium">通知設定の内容がここに入ります。</p></TabsContent>
+          <TabsContent value="z"><p className="py-4 character-3-regular-pro text-text-medium">セキュリティ設定の内容がここに入ります。</p></TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  ),
+};
+
 export const Solid: Story = {
   render: args => (
     <Tabs defaultValue="tab1" {...args}>