willa-workspace 0.0.3-alpha.2739b3e

package/example/src/docs/Select.demo.tsx

@@ -0,0 +1,164 @@
+import { Select } from "willa/Select";
+import "willa/Select.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const stackStyle = {
+  display: "grid",
+  gap: "0.9rem",
+  maxWidth: "42rem",
+} as const;
+
+const options = [
+  { value: "fast", label: "快速模式" },
+  { value: "balanced", label: "均衡模式" },
+  { value: "quality", label: "高质量模式" },
+];
+
+export default defineDoc({
+  id: "select",
+  name: "Select",
+  category: "form",
+  packageName: "willa/Select",
+  description: "用于单选下拉，适合表单、筛选和配置场景。",
+  imports: [{ name: "Select", from: "willa/Select" }],
+  css: "willa/Select.css",
+  demo: {
+    name: "Select",
+    component: Select,
+    props: {
+      options,
+      defaultValue: "balanced",
+      width: "100%",
+    },
+  },
+  code: `
+    import { Select } from "willa/Select";
+    import "willa/Select.css";
+
+    const options = [
+      { value: "fast", label: "快速模式" },
+      { value: "balanced", label: "均衡模式" },
+      { value: "quality", label: "高质量模式" },
+    ];
+
+    <Select options={options} defaultValue="balanced" width="100%" />;
+  `,
+  sections: [
+    {
+      title: "基础状态",
+      code: `
+        <div style={stackStyle}>
+          <Select placeholder="选择模型模式" options={options} width="100%" />
+          <Select
+            defaultValue="balanced"
+            options={options}
+            variant="soft"
+            width="100%"
+          />
+          <Select
+            invalid
+            defaultValue=""
+            placeholder="请选择必填项"
+            options={options}
+            width="100%"
+          />
+          <Select disabled defaultValue="fast" options={options} width="100%" />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Select placeholder="选择模型模式" options={options} width="100%" />
+          <Select
+            defaultValue="balanced"
+            options={options}
+            variant="soft"
+            width="100%"
+          />
+          <Select
+            invalid
+            defaultValue=""
+            placeholder="请选择必填项"
+            options={options}
+            width="100%"
+          />
+          <Select disabled defaultValue="fast" options={options} width="100%" />
+        </div>
+      ),
+    },
+    {
+      title: "尺寸",
+      code: `
+        <div style={stackStyle}>
+          <Select size="sm" options={options} defaultValue="fast" />
+          <Select size="md" options={options} defaultValue="balanced" />
+          <Select size="lg" options={options} defaultValue="quality" />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Select size="sm" options={options} defaultValue="fast" />
+          <Select size="md" options={options} defaultValue="balanced" />
+          <Select size="lg" options={options} defaultValue="quality" />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "options",
+      type: "Array<SelectOption>",
+      required: true,
+      description: "下拉选项。",
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: '"请选择"',
+      description: "未选择时展示的占位选项。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      defaultValue: '"md"',
+      description: "选择框尺寸。",
+    },
+    {
+      name: "variant",
+      type: '"outline" | "soft"',
+      defaultValue: '"outline"',
+      description: "选择框视觉类型。",
+    },
+    {
+      name: "width",
+      type: "CSSProperties['width']",
+      description: "自定义选择框宽度；设置为 100% 时占满父容器。",
+    },
+    {
+      name: "invalid",
+      type: "boolean",
+      defaultValue: "false",
+      description: "展示错误状态。",
+    },
+    {
+      name: "name",
+      type: "string",
+      description: "表单提交字段名。",
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string, option: SelectOption) => void",
+      description: "选中值变化时触发。",
+    },
+    {
+      name: "defaultValue",
+      type: "string",
+      description: "默认值。",
+    },
+    {
+      name: "value",
+      type: "string",
+      description: "受控值。",
+    },
+  ],
+});

package/example/src/docs/SelectionBar.demo.tsx

@@ -0,0 +1,315 @@
+import { ArchiveIcon, DownloadIcon, TrashIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import { Button } from "willa/Button";
+import { SelectionBar } from "willa/SelectionBar";
+import { Stack } from "willa/Stack";
+import "willa/Button.css";
+import "willa/SelectionBar.css";
+import "willa/Stack.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const SelectionBarStateDemo = () => {
+  const [selectedCount, setSelectedCount] = useState(3);
+  const totalCount = 18;
+
+  return (
+    <SelectionBar
+      selectedCount={selectedCount}
+      totalCount={totalCount}
+      description="当前筛选结果中还有未选中的文件。"
+      onSelectAll={() => setSelectedCount(totalCount)}
+      onClear={() => setSelectedCount(0)}
+      actions={
+        <>
+          <Button size="sm" variant="soft" icon={<DownloadIcon />}>
+            下载
+          </Button>
+          <Button size="sm" variant="outline" icon={<ArchiveIcon />}>
+            归档
+          </Button>
+        </>
+      }
+    />
+  );
+};
+
+export default defineDoc({
+  id: "selection-bar",
+  name: "SelectionBar",
+  packageName: "willa/SelectionBar",
+  description: "用于列表、表格、文件和卡片多选后的批量操作反馈。",
+  imports: [
+    { name: "Button", from: "willa/Button" },
+    { name: "SelectionBar", from: "willa/SelectionBar" },
+    { name: "Stack", from: "willa/Stack" },
+  ],
+  css: "willa/SelectionBar.css",
+  demo: {
+    name: "SelectionBar",
+    component: SelectionBar,
+    props: {
+      selectedCount: 3,
+      totalCount: 24,
+      description: "已选项目会参与接下来的批量操作。",
+      actions: (
+        <>
+          <Button size="sm" variant="soft" icon={<DownloadIcon />}>
+            下载
+          </Button>
+          <Button size="sm" variant="outline" icon={<TrashIcon />}>
+            删除
+          </Button>
+        </>
+      ),
+      onClear: () => undefined,
+    },
+  },
+  code: `
+    import { DownloadIcon, TrashIcon } from "@radix-ui/react-icons";
+    import { Button } from "willa/Button";
+    import { SelectionBar } from "willa/SelectionBar";
+    import "willa/Button.css";
+    import "willa/SelectionBar.css";
+
+    <SelectionBar
+      selectedCount={3}
+      totalCount={24}
+      description="已选项目会参与接下来的批量操作。"
+      actions={
+        <>
+          <Button size="sm" variant="soft" icon={<DownloadIcon />}>
+            下载
+          </Button>
+          <Button size="sm" variant="outline" icon={<TrashIcon />}>
+            删除
+          </Button>
+        </>
+      }
+      onClear={() => undefined}
+    />;
+  `,
+  sections: [
+    {
+      title: "全选和清空",
+      code: `
+        import { useState } from "react";
+        import { ArchiveIcon, DownloadIcon } from "@radix-ui/react-icons";
+
+        const Demo = () => {
+          const [selectedCount, setSelectedCount] = useState(3);
+          const totalCount = 18;
+
+          return (
+            <SelectionBar
+              selectedCount={selectedCount}
+              totalCount={totalCount}
+              description="当前筛选结果中还有未选中的文件。"
+              onSelectAll={() => setSelectedCount(totalCount)}
+              onClear={() => setSelectedCount(0)}
+              actions={
+                <>
+                  <Button size="sm" variant="soft" icon={<DownloadIcon />}>
+                    下载
+                  </Button>
+                  <Button size="sm" variant="outline" icon={<ArchiveIcon />}>
+                    归档
+                  </Button>
+                </>
+              }
+            />
+          );
+        };
+      `,
+      content: <SelectionBarStateDemo />,
+    },
+    {
+      title: "紧凑模式",
+      code: `
+        <SelectionBar
+          compact
+          selectedCount={2}
+          label="已选中 2 条评论"
+          actions={
+            <Button size="sm" variant="soft">
+              标记已读
+            </Button>
+          }
+          onClear={() => undefined}
+        />;
+      `,
+      content: (
+        <SelectionBar
+          compact
+          selectedCount={2}
+          label="已选中 2 条评论"
+          actions={
+            <Button size="sm" variant="soft">
+              标记已读
+            </Button>
+          }
+          onClear={() => undefined}
+        />
+      ),
+    },
+    {
+      title: "粘性操作区",
+      code: `
+        <SelectionBar
+          sticky
+          selectedCount={6}
+          totalCount={42}
+          description="适合表格顶部、文件列表顶部和卡片墙顶部。"
+          actions={
+            <>
+              <Button size="sm" variant="soft">
+                移动到分组
+              </Button>
+              <Button size="sm" variant="outline">
+                批量设置标签
+              </Button>
+            </>
+          }
+          onSelectAll={() => undefined}
+          onClear={() => undefined}
+        />;
+      `,
+      content: (
+        <SelectionBar
+          sticky
+          selectedCount={6}
+          totalCount={42}
+          description="适合表格顶部、文件列表顶部和卡片墙顶部。"
+          actions={
+            <>
+              <Button size="sm" variant="soft">
+                移动到分组
+              </Button>
+              <Button size="sm" variant="outline">
+                批量设置标签
+              </Button>
+            </>
+          }
+          onSelectAll={() => undefined}
+          onClear={() => undefined}
+        />
+      ),
+    },
+    {
+      title: "不同对齐方式",
+      code: `
+        <Stack gap="sm">
+          <SelectionBar
+            align="start"
+            selectedCount={1}
+            label="已选中当前文档"
+            actions={<Button size="sm">打开</Button>}
+          />
+          <SelectionBar
+            align="end"
+            selectedCount={4}
+            label="批量处理 4 个任务"
+            actions={<Button size="sm">执行</Button>}
+          />
+        </Stack>;
+      `,
+      content: (
+        <Stack gap="sm">
+          <SelectionBar
+            align="start"
+            selectedCount={1}
+            label="已选中当前文档"
+            actions={<Button size="sm">打开</Button>}
+          />
+          <SelectionBar
+            align="end"
+            selectedCount={4}
+            label="批量处理 4 个任务"
+            actions={<Button size="sm">执行</Button>}
+          />
+        </Stack>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "selectedCount",
+      type: "number",
+      required: true,
+      description: "当前选中的项目数量。",
+    },
+    {
+      name: "totalCount",
+      type: "number",
+      description: "当前集合或筛选结果的总数量，用于展示选择进度。",
+    },
+    {
+      name: "label",
+      type: "ReactNode",
+      defaultValue: "根据 selectedCount 和 totalCount 生成",
+      description:
+        "自定义摘要文案。未传时根据 selectedCount 和 totalCount 生成。",
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "展示在摘要下方的辅助说明。",
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: "主操作区，通常放批量下载、移动、归档、删除等按钮。",
+    },
+    {
+      name: "secondaryActions",
+      type: "ReactNode",
+      description: "辅助操作区，展示在内置全选和清空按钮前。",
+    },
+    {
+      name: "onSelectAll",
+      type: "() => void",
+      description: "点击全选按钮时触发。传入后展示全选按钮。",
+    },
+    {
+      name: "onClear",
+      type: "() => void",
+      description: "点击清空按钮时触发。传入后展示清空按钮。",
+    },
+    {
+      name: "selectAllLabel",
+      type: "ReactNode",
+      defaultValue: '"选择全部"',
+      description: "自定义全选按钮文案。",
+    },
+    {
+      name: "clearLabel",
+      type: "ReactNode",
+      defaultValue: '"取消选择"',
+      description: "自定义清空按钮文案。",
+    },
+    {
+      name: "sticky",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否启用粘性定位，适合长列表顶部的批量操作区。",
+    },
+    {
+      name: "compact",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否使用紧凑尺寸。",
+    },
+    {
+      name: "align",
+      type: '"start" | "between" | "end"',
+      defaultValue: '"between"',
+      description: "摘要和操作区的横向分布方式，默认 between。",
+    },
+    {
+      name: "loading",
+      type: "boolean",
+      defaultValue: "false",
+      description: "批量操作执行中时禁用内置全选和清空按钮。",
+    },
+  ],
+});

package/example/src/docs/Separator.demo.tsx

@@ -0,0 +1,179 @@
+import { Separator } from "willa/Separator";
+import "willa/Separator.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const metaRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  color: "var(--willa-text-soft)",
+  fontSize: "0.92rem",
+  lineHeight: 1.5,
+} as const;
+
+export default defineDoc({
+  id: "separator",
+  name: "Separator",
+  category: "layout",
+  packageName: "willa/Separator",
+  description: "用于内容段落、文章区块和行内元信息之间的轻量分隔。",
+  imports: [{ name: "Separator", from: "willa/Separator" }],
+  css: "willa/Separator.css",
+  demo: {
+    name: "Separator",
+    component: Separator,
+  },
+  code: `
+    import { Separator } from "willa/Separator";
+    import "willa/Separator.css";
+
+    <Separator />;
+  `,
+  sections: [
+    {
+      title: "基础分隔",
+      code: `
+        <Separator />;
+      `,
+      content: <Separator />,
+    },
+    {
+      title: "带文案",
+      code: `
+        <Separator>相关阅读</Separator>;
+      `,
+      content: <Separator>相关阅读</Separator>,
+    },
+    {
+      title: "线条样式",
+      code: `
+        <div style={{ display: "grid", gap: "0.2rem" }}>
+          <Separator variant="solid">实线</Separator>
+          <Separator variant="dashed">虚线</Separator>
+          <Separator variant="dotted">点线</Separator>
+        </div>;
+      `,
+      content: (
+        <div style={{ display: "grid", gap: "0.2rem" }}>
+          <Separator variant="solid">实线</Separator>
+          <Separator variant="dashed">虚线</Separator>
+          <Separator variant="dotted">点线</Separator>
+        </div>
+      ),
+    },
+    {
+      title: "文案位置",
+      code: `
+        <div style={{ display: "grid", gap: "0.2rem" }}>
+          <Separator align="start">上文</Separator>
+          <Separator align="center">更多内容</Separator>
+          <Separator align="end">下文</Separator>
+        </div>;
+      `,
+      content: (
+        <div style={{ display: "grid", gap: "0.2rem" }}>
+          <Separator align="start">上文</Separator>
+          <Separator align="center">更多内容</Separator>
+          <Separator align="end">下文</Separator>
+        </div>
+      ),
+    },
+    {
+      title: "间距尺寸",
+      code: `
+        <div>
+          <p>第一段内容。</p>
+          <Separator size="sm" />
+          <p>第二段内容。</p>
+          <Separator size="lg" />
+          <p>第三段内容。</p>
+        </div>;
+      `,
+      content: (
+        <div>
+          <p>第一段内容。</p>
+          <Separator size="sm" />
+          <p>第二段内容。</p>
+          <Separator size="lg" />
+          <p>第三段内容。</p>
+        </div>
+      ),
+    },
+    {
+      title: "竖向分隔",
+      code: `
+        <div style={metaRowStyle}>
+          <span>Willa</span>
+          <Separator orientation="vertical" />
+          <span>3 分钟阅读</span>
+          <Separator orientation="vertical" />
+          <span>2026</span>
+        </div>;
+      `,
+      content: (
+        <div style={metaRowStyle}>
+          <span>Willa</span>
+          <Separator orientation="vertical" />
+          <span>3 分钟阅读</span>
+          <Separator orientation="vertical" />
+          <span>2026</span>
+        </div>
+      ),
+    },
+    {
+      title: "弱化文案",
+      code: `
+        <Separator plain>仅作为轻量分组提示</Separator>;
+      `,
+      content: <Separator plain>仅作为轻量分组提示</Separator>,
+    },
+  ],
+  props: [
+    {
+      name: "orientation",
+      type: '"horizontal" | "vertical"',
+      defaultValue: '"horizontal"',
+      description: "分隔方向。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      defaultValue: '"md"',
+      description: "分隔组件的外部间距。",
+    },
+    {
+      name: "align",
+      type: '"start" | "center" | "end"',
+      defaultValue: '"center"',
+      description: "横向带文案时的文案位置。",
+    },
+    {
+      name: "variant",
+      type: '"solid" | "dashed" | "dotted"',
+      defaultValue: '"solid"',
+      description: "线条样式。",
+    },
+    {
+      name: "plain",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否弱化文案字重。",
+    },
+    {
+      name: "decorative",
+      type: "boolean",
+      defaultValue: "true",
+      description: "是否作为纯视觉分隔，默认不暴露给辅助技术。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "可选的外层 className。",
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "横向分隔中间展示的可选文案。",
+    },
+  ],
+});