Initial commit

2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
--- a/docs/components/plan.md
+++ b/docs/components/plan.md
@@ -0,0 +1,167 @@
+# Plan
+
+URL: /components/plan
+
+---
+
+title: Plan
+description: A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
+path: elements/components/plan
+
+---
+
+The `Plan` component provides a flexible system for displaying AI-generated execution plans with collapsible content. Perfect for showing multi-step workflows, task breakdowns, and implementation strategies with support for streaming content and loading states.
+
+<Preview path="plan" />
+
+## Installation
+
+<ElementsInstaller path="plan" />
+
+## Usage
+
+```tsx
+import { Plan, PlanAction, PlanContent, PlanDescription, PlanFooter, PlanHeader, PlanTitle, PlanTrigger } from "@/components/ai-elements/plan";
+```
+
+```tsx
+<Plan defaultOpen={false}>
+    <PlanHeader>
+        <div>
+            <PlanTitle>Implement new feature</PlanTitle>
+            <PlanDescription>Add authentication system with JWT tokens and refresh logic.</PlanDescription>
+        </div>
+        <PlanTrigger />
+    </PlanHeader>
+    <PlanContent>
+        <div className="space-y-4 text-sm">
+            <div>
+                <h3 className="mb-2 font-semibold">Overview</h3>
+                <p>This plan outlines the implementation strategy...</p>
+            </div>
+        </div>
+    </PlanContent>
+    <PlanFooter>
+        <Button>Execute Plan</Button>
+    </PlanFooter>
+</Plan>
+```
+
+## Features
+
+-   Collapsible content with smooth animations
+-   Streaming support with shimmer loading states
+-   Built on shadcn/ui Card and Collapsible components
+-   TypeScript support with comprehensive type definitions
+-   Customizable styling with Tailwind CSS
+-   Responsive design with mobile-friendly interactions
+-   Keyboard navigation and accessibility support
+-   Theme-aware with automatic dark mode support
+-   Context-based state management for streaming
+
+## Props
+
+### `<Plan />`
+
+<TypeTable
+type={{
+  isStreaming: {
+    description: 'Whether content is currently streaming. Enables shimmer animations on title and description.',
+    type: 'boolean',
+    default: 'false',
+  },
+  defaultOpen: {
+    description: 'Whether the plan is expanded by default.',
+    type: 'boolean',
+  },
+  '...props': {
+    description: 'Any other props are spread to the Collapsible component.',
+    type: 'React.ComponentProps<typeof Collapsible>',
+  },
+}}
+/>
+
+### `<PlanHeader />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the CardHeader component.',
+    type: 'React.ComponentProps<typeof CardHeader>',
+  },
+}}
+/>
+
+### `<PlanTitle />`
+
+<TypeTable
+type={{
+  children: {
+    description: 'The title text. Displays with shimmer animation when isStreaming is true.',
+    type: 'string',
+  },
+  '...props': {
+    description: 'Any other props (except children) are spread to the CardTitle component.',
+    type: 'Omit<React.ComponentProps<typeof CardTitle>, "children">',
+  },
+}}
+/>
+
+### `<PlanDescription />`
+
+<TypeTable
+type={{
+  children: {
+    description: 'The description text. Displays with shimmer animation when isStreaming is true.',
+    type: 'string',
+  },
+  '...props': {
+    description: 'Any other props (except children) are spread to the CardDescription component.',
+    type: 'Omit<React.ComponentProps<typeof CardDescription>, "children">',
+  },
+}}
+/>
+
+### `<PlanTrigger />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the CollapsibleTrigger component. Renders as a Button with chevron icon.',
+    type: 'React.ComponentProps<typeof CollapsibleTrigger>',
+  },
+}}
+/>
+
+### `<PlanContent />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the CardContent component.',
+    type: 'React.ComponentProps<typeof CardContent>',
+  },
+}}
+/>
+
+### `<PlanFooter />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the div element.',
+    type: 'React.ComponentProps<"div">',
+  },
+}}
+/>
+
+### `<PlanAction />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the CardAction component.',
+    type: 'React.ComponentProps<typeof CardAction>',
+  },
+}}
+/>