@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/collapsible/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * 折叠面板 Collapsible
+ *
+ * 可展开 / 收起的内容区域，基于 Radix Collapsible 原语。
+ *
+ * 组合结构：Collapsible > CollapsibleTrigger + CollapsibleContent
+ *
+ * @when
+ * - 高级设置的展开收起
+ * - 侧边栏菜单分组折叠
+ * - 树形结构的子节点展开
+ */
+'use client';
+
+import * as React from 'react';
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+
+export interface CollapsibleProps
+  extends Omit<
+    React.ComponentProps<typeof CollapsiblePrimitive.Root>,
+    'open' | 'defaultOpen' | 'onOpenChange' | 'disabled'
+  > {
+  /** 受控展开状态。 */
+  open?: boolean;
+  /** 非受控初始展开状态。 @default false */
+  defaultOpen?: boolean;
+  /**
+   * 展开 / 收起状态变化回调。
+   * @param open 当前是否展开
+   */
+  onOpenChange?: (open: boolean) => void;
+  /** 禁用整个折叠面板，触发器不可交互。 @default false */
+  disabled?: boolean;
+}
+
+export interface CollapsibleTriggerProps
+  extends React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> {
+  /** 是否将 Trigger 渲染为子节点（Radix Slot 模式）。 @default false */
+  asChild?: boolean;
+}
+
+export interface CollapsibleContentProps
+  extends React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent> {
+  /** 是否将 Content 渲染为子节点（Radix Slot 模式）。 @default false */
+  asChild?: boolean;
+  /** 强制渲染内容（即使在收起状态），便于 SEO / 动画接管。 @default false */
+  forceMount?: true;
+}
+
+function Collapsible({ ...props }: CollapsibleProps) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: CollapsibleTriggerProps) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({ ...props }: CollapsibleContentProps) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/collapsible/meta.md

@@ -0,0 +1,87 @@
+# Collapsible
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+折叠面板 Collapsible
+可展开 / 收起的内容区域，基于 Radix Collapsible 原语。
+组合结构：Collapsible > CollapsibleTrigger + CollapsibleContent
+
+## 使用场景
+
+- 高级设置的展开收起
+- 侧边栏菜单分组折叠
+- 树形结构的子节点展开
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean` | – | – | 受控展开状态。 |
+| `defaultOpen` | `boolean` | `false` | – | 非受控初始展开状态。 |
+| `onOpenChange` | `(open: boolean) => void` | – | – | 展开 / 收起状态变化回调。 |
+| `disabled` | `boolean` | `false` | – | 禁用整个折叠面板，触发器不可交互。 |
+| `asChild` | `boolean` | `false` | – | 是否将 Trigger 渲染为子节点（Radix Slot 模式）。 |
+| `asChild` | `boolean` | `false` | – | 是否将 Content 渲染为子节点（Radix Slot 模式）。 |
+| `forceMount` | `true` | `false` | – | 强制渲染内容（即使在收起状态），便于 SEO / 动画接管。 |
+
+## 示例
+
+### DefaultOpen
+
+默认展开状态。
+
+```tsx
+<Collapsible defaultOpen className="w-80">
+  <div className="flex items-center justify-between rounded-md border border-border px-3 py-2">
+    <span className="text-xs font-medium">依赖列表</span>
+    <CollapsibleTrigger asChild>
+      <button
+        type="button"
+        className="inline-flex size-6 items-center justify-center rounded hover:bg-muted"
+      >
+        <ChevronsUpDownIcon className="size-3.5" />
+      </button>
+    </CollapsibleTrigger>
+  </div>
+  <CollapsibleContent>
+    <div className="mt-2 flex flex-col gap-1.5">
+      <div className="rounded-md border border-border px-3 py-2 text-xs">
+        react ^18.3.0
+      </div>
+      <div className="rounded-md border border-border px-3 py-2 text-xs">
+        radix-ui ^1.0.0
+      </div>
+      <div className="rounded-md border border-border px-3 py-2 text-xs">
+        tailwindcss ^4.0.0
+      </div>
+    </div>
+  </CollapsibleContent>
+</Collapsible>
+```
+
+### Disabled
+
+禁用状态，触发器不可交互。
+
+```tsx
+<Collapsible disabled className="w-80">
+  <div className="flex items-center justify-between rounded-md border border-border px-3 py-2 opacity-50">
+    <span className="text-xs font-medium">已锁定内容</span>
+    <CollapsibleTrigger asChild>
+      <button
+        type="button"
+        className="inline-flex size-6 items-center justify-center rounded"
+      >
+        <ChevronsUpDownIcon className="size-3.5" />
+      </button>
+    </CollapsibleTrigger>
+  </div>
+  <CollapsibleContent>
+    <div className="mt-2 rounded-md border border-border px-3 py-2 text-xs">
+      此内容已锁定。
+    </div>
+  </CollapsibleContent>
+</Collapsible>
+```

package/src/components/collapsible/stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChevronsUpDownIcon } from 'lucide-react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './index';
+
+const meta: Meta<typeof Collapsible> = {
+  title: '数据展示 · Data Display/Collapsible 折叠节点',
+  component: Collapsible,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 基础折叠节点，点击触发器展开/收起内容。 */
+export const Default: Story = {
+  render: () => (
+    <Collapsible className="w-80">
+      <div className="flex items-center justify-between rounded-md border border-border px-3 py-2">
+        <span className="text-xs font-medium">@teamix/ui</span>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex size-6 items-center justify-center rounded hover:bg-muted"
+          >
+            <ChevronsUpDownIcon className="size-3.5" />
+          </button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent>
+        <div className="mt-2 flex flex-col gap-1.5">
+          <div className="rounded-md border border-border px-3 py-2 text-xs">
+            @teamix/tokens
+          </div>
+          <div className="rounded-md border border-border px-3 py-2 text-xs">
+            @teamix/icons
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};
+
+/** 默认展开状态。 */
+export const DefaultOpen: Story = {
+  render: () => (
+    <Collapsible defaultOpen className="w-80">
+      <div className="flex items-center justify-between rounded-md border border-border px-3 py-2">
+        <span className="text-xs font-medium">依赖列表</span>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex size-6 items-center justify-center rounded hover:bg-muted"
+          >
+            <ChevronsUpDownIcon className="size-3.5" />
+          </button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent>
+        <div className="mt-2 flex flex-col gap-1.5">
+          <div className="rounded-md border border-border px-3 py-2 text-xs">
+            react ^18.3.0
+          </div>
+          <div className="rounded-md border border-border px-3 py-2 text-xs">
+            radix-ui ^1.0.0
+          </div>
+          <div className="rounded-md border border-border px-3 py-2 text-xs">
+            tailwindcss ^4.0.0
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};
+
+/** 禁用状态，触发器不可交互。 */
+export const Disabled: Story = {
+  render: () => (
+    <Collapsible disabled className="w-80">
+      <div className="flex items-center justify-between rounded-md border border-border px-3 py-2 opacity-50">
+        <span className="text-xs font-medium">已锁定内容</span>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex size-6 items-center justify-center rounded"
+          >
+            <ChevronsUpDownIcon className="size-3.5" />
+          </button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent>
+        <div className="mt-2 rounded-md border border-border px-3 py-2 text-xs">
+          此内容已锁定。
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};