willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,124 @@
+import { Image } from "willa/Image";
+import "willa/Image.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+export default defineDoc({
+  id: "image",
+  name: "Image",
+  packageName: "willa/Image",
+  description: "响应式图片组件，支持可选说明和灯箱预览。",
+  imports: [{ name: "Image", from: "willa/Image" }],
+  css: "willa/Image.css",
+  demo: {
+    name: "Image",
+    component: Image,
+    props: {
+      src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80",
+      alt: "金色时刻的湖边风景",
+      title: "风景预览",
+    },
+  },
+  code: `
+    import { Image } from "willa/Image";
+    import "willa/Image.css";
+
+    <Image
+      src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80"
+      alt="金色时刻的湖边风景"
+      title="风景预览"
+    />;
+  `,
+  sections: [
+    {
+      title: "Hover 放大",
+      code: `
+        <Image
+          hoverZoom
+          src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=900&q=80"
+          alt="看向窗边的人像"
+          title="适合人物和封面图片的轻微 hover 放大"
+        />;
+      `,
+      content: (
+        <div style={{ width: "min(100%, 34rem)", margin: "0 auto" }}>
+          <Image
+            hoverZoom
+            src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=900&q=80"
+            alt="看向窗边的人像"
+            title="适合人物和封面图片的轻微 hover 放大"
+          />
+        </div>
+      ),
+    },
+    {
+      title: "自定义背景",
+      code: `
+        <Image
+          backgroundColor="transparent"
+          src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?auto=format&fit=crop&w=900&q=80"
+          alt="浅色背景中的人像"
+          title="背景可以自定义，也可以设为透明"
+        />;
+      `,
+      content: (
+        <div style={{ width: "min(100%, 34rem)", margin: "0 auto" }}>
+          <Image
+            backgroundColor="transparent"
+            src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?auto=format&fit=crop&w=900&q=80"
+            alt="浅色背景中的人像"
+            title="背景可以自定义，也可以设为透明"
+          />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "src",
+      type: "string",
+      description: "图片资源地址。",
+    },
+    {
+      name: "alt",
+      type: "string",
+      description: "用于无障碍访问的替代文本。",
+    },
+    {
+      name: "title",
+      type: "string",
+      description: "展示在图片下方的可选说明。",
+    },
+    {
+      name: "hoverZoom",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否在鼠标悬浮时轻微放大图片，默认关闭。",
+    },
+    {
+      name: "backgroundColor",
+      type: "CSSProperties['backgroundColor']",
+      description: "自定义图片容器和透明区域的背景色，可传 transparent。",
+    },
+    {
+      name: "openLightbox",
+      type: "(state: LightboxState | null) => void",
+      description: "可选的灯箱状态回调。",
+    },
+    {
+      name: "articleSourcePath",
+      type: "string",
+      description: "当前文章路径，用于解析相对图片资源。",
+    },
+    {
+      name: "resolveAssetUrl",
+      type: "(articleSourcePath: string, assetPath: string) => string | undefined",
+      description: "把相对图片资源转换为可访问 URL。",
+    },
+    {
+      name: "...imgProps",
+      type: "ComponentProps<'img'>",
+      description: "透传给内部 img，例如 width、height、loading、className。",
+    },
+  ],
+});

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

@@ -0,0 +1,206 @@
+import { ImageGallery } from "willa/ImageGallery";
+import "willa/ImageGallery.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+export default defineDoc({
+  id: "image-gallery",
+  name: "ImageGallery",
+  packageName: "willa/ImageGallery",
+  description: "紧凑的响应式图片画廊。",
+  imports: [{ name: "ImageGallery", from: "willa/ImageGallery" }],
+  css: "willa/ImageGallery.css",
+  demo: {
+    name: "ImageGallery",
+    component: ImageGallery,
+    props: {
+      columns: 3,
+      images: [
+        {
+          src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80",
+          alt: "湖边风景",
+          caption: "湖泊",
+        },
+        {
+          src: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=800&q=80",
+          alt: "山间公路",
+          caption: "公路",
+        },
+        {
+          src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=800&q=80",
+          alt: "沙漠丘陵",
+          caption: "丘陵",
+        },
+      ],
+    },
+  },
+  code: `
+    import { ImageGallery } from "willa/ImageGallery";
+    import "willa/ImageGallery.css";
+
+    <ImageGallery
+      columns={3}
+      images={[
+        {
+          src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80",
+          alt: "湖边风景",
+          caption: "湖泊",
+        },
+        {
+          src: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=800&q=80",
+          alt: "山间公路",
+          caption: "公路",
+        },
+      ]}
+    />;
+  `,
+  sections: [
+    {
+      title: "Hover 放大",
+      code: `
+        <ImageGallery
+          hoverZoom
+          columns={3}
+          images={[
+            {
+              src: "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=800&q=80",
+              alt: "窗边人像",
+              caption: "人像",
+            },
+            {
+              src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=800&q=80",
+              alt: "自然光人像",
+              caption: "自然光",
+            },
+            {
+              src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=800&q=80",
+              alt: "户外人像",
+              caption: "户外",
+            },
+          ]}
+        />;
+      `,
+      content: (
+        <div style={{ width: "min(100%, 44rem)", margin: "0 auto" }}>
+          <ImageGallery
+            hoverZoom
+            columns={3}
+            images={[
+              {
+                src: "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=800&q=80",
+                alt: "窗边人像",
+                caption: "人像",
+              },
+              {
+                src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=800&q=80",
+                alt: "自然光人像",
+                caption: "自然光",
+              },
+              {
+                src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=800&q=80",
+                alt: "户外人像",
+                caption: "户外",
+              },
+            ]}
+          />
+        </div>
+      ),
+    },
+    {
+      title: "自定义背景",
+      code: `
+        <ImageGallery
+          columns={3}
+          backgroundColor="#f2f6ee"
+          images={[
+            {
+              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=800&q=80",
+              alt: "浅绿色背景的人像",
+              caption: "柔和背景",
+            },
+            {
+              src: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80",
+              alt: "暖色人像",
+              caption: "暖色",
+            },
+            {
+              src: "https://images.unsplash.com/photo-1521119989659-a83eee488004?auto=format&fit=crop&w=800&q=80",
+              alt: "侧脸人像",
+              caption: "侧脸",
+            },
+          ]}
+        />;
+      `,
+      content: (
+        <div style={{ width: "min(100%, 44rem)", margin: "0 auto" }}>
+          <ImageGallery
+            columns={3}
+            backgroundColor="#f2f6ee"
+            images={[
+              {
+                src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=800&q=80",
+                alt: "浅绿色背景的人像",
+                caption: "柔和背景",
+              },
+              {
+                src: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80",
+                alt: "暖色人像",
+                caption: "暖色",
+              },
+              {
+                src: "https://images.unsplash.com/photo-1521119989659-a83eee488004?auto=format&fit=crop&w=800&q=80",
+                alt: "侧脸人像",
+                caption: "侧脸",
+              },
+            ]}
+          />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "images",
+      type: "Array<string | { src: string; alt?: string; caption?: string }>",
+      required: true,
+      description: "画廊中渲染的图片列表。",
+    },
+    {
+      name: "columns",
+      type: "2 | 3 | 4",
+      defaultValue: "2",
+      description: "桌面端优先使用的列数。",
+    },
+    {
+      name: "hoverZoom",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否在鼠标悬浮图片时轻微放大，默认关闭。",
+    },
+    {
+      name: "backgroundColor",
+      type: "CSSProperties['backgroundColor']",
+      description: "自定义图片容器和透明区域的背景色，可传 transparent。",
+    },
+    {
+      name: "openLightbox",
+      type: "(state: LightboxState | null) => void",
+      description: "可选的灯箱状态回调。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "传给图片画廊根节点的 className。",
+    },
+    {
+      name: "articleSourcePath",
+      type: "string",
+      description: "当前文章路径，用于解析相对图片资源。",
+    },
+    {
+      name: "resolveAssetUrl",
+      type: "(articleSourcePath: string, assetPath: string) => string | undefined",
+      description: "把相对图片资源转换为可访问 URL。",
+    },
+  ],
+});

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

@@ -0,0 +1,238 @@
+import {
+  CheckCircledIcon,
+  EnvelopeClosedIcon,
+  MagnifyingGlassIcon,
+} from "@radix-ui/react-icons";
+import { Input } from "willa/Input";
+import "willa/Input.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const stackStyle = {
+  display: "grid",
+  gap: "0.85rem",
+  maxWidth: "42rem",
+} as const;
+
+const inputStackStyle = {
+  ...stackStyle,
+  width: "min(100%, 22rem)",
+  gap: "0.95rem",
+} as const;
+
+const rowStyle = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.75rem",
+  alignItems: "center",
+} as const;
+
+export default defineDoc({
+  id: "input",
+  name: "Input",
+  category: "form",
+  packageName: "willa/Input",
+  description: "用于表单、搜索、配置和 AI 产品输入区域的单行输入框。",
+  imports: [{ name: "Input", from: "willa/Input" }],
+  css: "willa/Input.css",
+  demo: {
+    name: "Input",
+    component: Input,
+    props: {
+      placeholder: "搜索文档、组件或提示词",
+      leadingIcon: <MagnifyingGlassIcon />,
+      width: "100%",
+    },
+  },
+  code: `
+    import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+    import { Input } from "willa/Input";
+    import "willa/Input.css";
+
+    <Input
+      placeholder="搜索文档、组件或提示词"
+      leadingIcon={<MagnifyingGlassIcon />}
+      width="100%"
+    />;
+  `,
+  sections: [
+    {
+      title: "基础状态",
+      code: `
+        <div style={stackStyle}>
+          <Input placeholder="请输入项目名称" />
+          <Input placeholder="搜索上下文" leadingIcon={<MagnifyingGlassIcon />} />
+          <Input
+            defaultValue="ready@example.com"
+            leadingIcon={<EnvelopeClosedIcon />}
+            trailingIcon={<CheckCircledIcon />}
+          />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Input placeholder="请输入项目名称" />
+          <Input
+            placeholder="搜索上下文"
+            leadingIcon={<MagnifyingGlassIcon />}
+          />
+          <Input
+            defaultValue="ready@example.com"
+            leadingIcon={<EnvelopeClosedIcon />}
+            trailingIcon={<CheckCircledIcon />}
+          />
+        </div>
+      ),
+    },
+    {
+      title: "尺寸",
+      code: `
+        <div style={stackStyle}>
+          <Input size="sm" placeholder="紧凑输入" />
+          <Input size="md" placeholder="默认输入" />
+          <Input size="lg" placeholder="大尺寸输入" />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Input size="sm" placeholder="紧凑输入" />
+          <Input size="md" placeholder="默认输入" />
+          <Input size="lg" placeholder="大尺寸输入" />
+        </div>
+      ),
+    },
+    {
+      title: "附加内容",
+      code: `
+        <div style={inputStackStyle}>
+          <Input
+            width="100%"
+            leadingAddon="https://"
+            trailingAddon=".com"
+            defaultValue="willa-ui"
+          />
+          <Input width="100%" leadingAddon="模型" defaultValue="gpt-4.1" />
+        </div>;
+      `,
+      content: (
+        <div style={inputStackStyle}>
+          <Input
+            width="100%"
+            leadingAddon="https://"
+            trailingAddon=".com"
+            defaultValue="willa-ui"
+          />
+          <Input width="100%" leadingAddon="模型" defaultValue="gpt-4.1" />
+        </div>
+      ),
+    },
+    {
+      title: "状态",
+      code: `
+        <div style={stackStyle}>
+          <Input invalid defaultValue="missing-api-key" />
+          <Input disabled defaultValue="不可编辑" />
+          <Input variant="soft" placeholder="柔和背景" />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Input invalid defaultValue="missing-api-key" />
+          <Input disabled defaultValue="不可编辑" />
+          <Input variant="soft" placeholder="柔和背景" />
+        </div>
+      ),
+    },
+    {
+      title: "自定义颜色",
+      code: `
+        <div style={rowStyle}>
+          <Input backgroundColor="rgba(147, 197, 253, 0.18)" placeholder="自定义背景" />
+          <Input
+            backgroundColor="#f6e7c8"
+            textColor="#3f2a12"
+            defaultValue="warm field"
+          />
+        </div>;
+      `,
+      content: (
+        <div style={rowStyle}>
+          <Input
+            backgroundColor="rgba(147, 197, 253, 0.18)"
+            placeholder="自定义背景"
+          />
+          <Input
+            backgroundColor="#f6e7c8"
+            textColor="#3f2a12"
+            defaultValue="warm field"
+          />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      defaultValue: '"md"',
+      description: "输入框尺寸。",
+    },
+    {
+      name: "variant",
+      type: '"outline" | "soft"',
+      defaultValue: '"outline"',
+      description: "输入框视觉类型。",
+    },
+    {
+      name: "type",
+      type: "HTMLInputTypeAttribute",
+      description: "原生 input 类型。滑块输入请使用 RangeInput。",
+    },
+    {
+      name: "invalid",
+      type: "boolean",
+      defaultValue: "false",
+      description: "展示错误状态。",
+    },
+    {
+      name: "width",
+      type: "CSSProperties['width']",
+      description: "自定义输入框宽度；设置为 100% 时占满父容器。",
+    },
+    {
+      name: "leadingIcon",
+      type: "ReactNode",
+      description: "输入内容前的图标。",
+    },
+    {
+      name: "trailingIcon",
+      type: "ReactNode",
+      description: "输入内容后的图标。",
+    },
+    {
+      name: "leadingAddon",
+      type: "ReactNode",
+      description: "输入内容前的附加文本或元素。",
+    },
+    {
+      name: "trailingAddon",
+      type: "ReactNode",
+      description: "输入内容后的附加文本或元素。",
+    },
+    {
+      name: "inputClassName",
+      type: "string",
+      description: "传给内部 input 元素的 className。",
+    },
+    {
+      name: "backgroundColor",
+      type: "string",
+      description: "自定义输入框背景颜色，支持 CSS 颜色值。",
+    },
+    {
+      name: "textColor",
+      type: "string",
+      description: "自定义输入框文字颜色，支持 CSS 颜色值。",
+    },
+  ],
+});