@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/src-astro/sidebar-nav/SidebarNavBasic.astro

@@ -0,0 +1,32 @@
+---
+import SidebarNav from './SidebarNav.astro';
+import type { ISidebarItem } from '../types/sidebar';
+
+const sidebarItems: ISidebarItem[] = [
+  {
+    text: '入门指南',
+    href: '/docs/getting-started',
+    items: [
+      { href: '/docs/getting-started/installation', text: '安装' },
+      { href: '/docs/getting-started/quick-start', text: '快速开始' },
+    ],
+  },
+  {
+    text: '基础组件',
+    href: '/docs/components',
+    items: [
+      { href: '/docs/components/button', text: 'Button 按钮' },
+      { href: '/docs/components/alert', text: 'Alert 提示' },
+      { href: '/docs/components/card', text: 'Card 卡片' },
+    ],
+  },
+];
+---
+
+<div class="cosy:w-64 cosy:bg-base-100">
+  <SidebarNav
+    sidebarItems={sidebarItems}
+    currentPath="/docs/getting-started/installation"
+    debug={false}
+  />
+</div>

package/dist/{sidebar-nav → src-astro/sidebar-nav}/index.ts

@@ -7,5 +7,5 @@ export { SidebarNav, SidebarNavBasic };
 
 // 导出示例源代码
 export const SidebarNavExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'SidebarNav'),
+  Basic: extractSimpleExample(BasicSourceCode, 'SidebarNav'),
 };

package/dist/src-astro/speak/Speak.astro

@@ -0,0 +1,73 @@
+---
+/**
+ * @component Speak
+ *
+ * @description
+ * Speak 组件用于展示人物语录或评价，包含说话者的头像、姓名、头衔和言论。
+ * 适用于用户评价、团队介绍等场景。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Speak
+ *   speakerName="张三"
+ *   speakerTitle="产品经理"
+ *   image={avatar}
+ *   words="这是一个非常棒的产品！"
+ * />
+ * ```
+ */
+
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import '../../style.ts';
+
+interface Props {
+  /**
+   * 说话者姓名
+   */
+  speakerName: string;
+  /**
+   * 说话者头衔
+   */
+  speakerTitle: string;
+  /**
+   * 说话者头像
+   */
+  image: ImageMetadata;
+  /**
+   * 说话内容
+   */
+  words: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  speakerName,
+  speakerTitle,
+  image,
+  words,
+  class: className = '',
+} = Astro.props;
+---
+
+<div
+  class={`cosy:flex cosy:flex-col cosy:items-center cosy:gap-4 cosy:p-6 cosy:bg-base-100 cosy:rounded-lg cosy:shadow-lg ${className}`}>
+  <Image
+    src={image}
+    alt={speakerName}
+    class="cosy:w-32 cosy:h-32 cosy:rounded-full cosy:object-cover"
+    width={128}
+    height={128}
+  />
+  <div class="cosy:text-center">
+    <h3 class="cosy:text-xl cosy:font-semibold cosy:text-base-content">
+      {speakerName}
+    </h3>
+    <p class="cosy:text-base-content/70">{speakerTitle}</p>
+  </div>
+  <p class="cosy:text-base-content/80 cosy:italic cosy:text-center">{words}</p>
+</div>

package/dist/src-astro/speak/SpeakBasic.astro

@@ -0,0 +1,13 @@
+---
+import { Speak } from '../../index-astro';
+import avatar from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:max-w-md">
+  <Speak
+    speakerName="张三"
+    speakerTitle="产品经理"
+    image={avatar}
+    words="这个组件库的设计非常优雅，使用起来非常方便，完全满足了我们的需求！"
+  />
+</div>

package/dist/src-astro/speak/SpeakGrid.astro

@@ -0,0 +1,30 @@
+---
+import { Speak } from '../../index-astro';
+import avatar1 from '../assets/logo-rounded.png';
+import avatar2 from '../assets/logo-rounded.png';
+import avatar3 from '../assets/logo-rounded.png';
+---
+
+<div
+  class="cosy:grid cosy:grid-cols-1 md:cosy:grid-cols-2 lg:cosy:grid-cols-3 cosy:gap-6">
+  <Speak
+    speakerName="李四"
+    speakerTitle="前端开发"
+    image={avatar1}
+    words="组件的代码结构非常清晰，文档详尽，对开发者非常友好。"
+  />
+
+  <Speak
+    speakerName="王五"
+    speakerTitle="UI 设计师"
+    image={avatar2}
+    words="设计系统的一致性很好，主题切换功能也很实用。"
+  />
+
+  <Speak
+    speakerName="赵六"
+    speakerTitle="技术总监"
+    image={avatar3}
+    words="这个组件库的性能和可维护性都很出色，是一个值得信赖的选择。"
+  />
+</div>

package/dist/{speak → src-astro/speak}/index.ts

@@ -9,6 +9,6 @@ export { Speak, SpeakBasic, SpeakGrid };
 
 // 导出示例源代码
 export const SpeakExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Speak'),
-	Grid: extractSimpleExample(GridSourceCode, 'Speak'),
+  Basic: extractSimpleExample(BasicSourceCode, 'Speak'),
+  Grid: extractSimpleExample(GridSourceCode, 'Speak'),
 };

package/dist/{stack → src-astro/stack}/Stack.astro

@@ -49,7 +49,7 @@
  */
 
 // 导入样式
-import '../style.ts';
+import '../../style.ts';
 
 // 定义间距类型
 type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -61,91 +61,93 @@ type AlignType = 'start' | 'center' | 'end' | 'stretch';
 type DividerColor = 'gray' | 'light' | 'dark' | 'primary';
 
 interface Props {
-	/**
-	 * 元素间距
-	 * @default "md"
-	 */
-	gap?: GapSize;
-
-	/**
-	 * 是否显示分隔线
-	 * @default false
-	 */
-	dividers?: boolean;
-
-	/**
-	 * 分隔线颜色
-	 * @default "gray"
-	 */
-	dividerColor?: DividerColor;
-
-	/**
-	 * 对齐方式
-	 * @default "stretch"
-	 */
-	align?: AlignType;
-
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-
-	/**
-	 * 类名列表
-	 */
-	'class:list'?: any;
-
-	[key: string]: any;
+  /**
+   * 元素间距
+   * @default "md"
+   */
+  gap?: GapSize;
+
+  /**
+   * 是否显示分隔线
+   * @default false
+   */
+  dividers?: boolean;
+
+  /**
+   * 分隔线颜色
+   * @default "gray"
+   */
+  dividerColor?: DividerColor;
+
+  /**
+   * 对齐方式
+   * @default "stretch"
+   */
+  align?: AlignType;
+
+  /**
+   * 自定义类名
+   */
+  class?: string;
+
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+
+  [key: string]: any;
 }
 
 const {
-	gap = 'md',
-	dividers = false,
-	dividerColor = 'gray',
-	align = 'stretch',
-	class: className = '',
-	'class:list': classList,
-	...rest
+  gap = 'md',
+  dividers = false,
+  dividerColor = 'gray',
+  align = 'stretch',
+  class: className = '',
+  'class:list': classList,
+  ...rest
 } = Astro.props;
 
 // 间距映射
 const gapClasses: Record<GapSize, string> = {
-	none: 'stack-gap-none',
-	xs: 'stack-gap-xs',
-	sm: 'stack-gap-sm',
-	md: 'stack-gap-md',
-	lg: 'stack-gap-lg',
-	xl: 'stack-gap-xl',
+  none: 'stack-gap-none',
+  xs: 'stack-gap-xs',
+  sm: 'stack-gap-sm',
+  md: 'stack-gap-md',
+  lg: 'stack-gap-lg',
+  xl: 'stack-gap-xl',
 };
 
 // 对齐方式映射
 const alignClasses: Record<AlignType, string> = {
-	start: 'stack-align-start',
-	center: 'stack-align-center',
-	end: 'stack-align-end',
-	stretch: 'stack-align-stretch',
+  start: 'stack-align-start',
+  center: 'stack-align-center',
+  end: 'stack-align-end',
+  stretch: 'stack-align-stretch',
 };
 
 // 分隔线颜色映射
 const dividerColorClasses: Record<DividerColor, string> = {
-	gray: 'stack-divider-gray',
-	light: 'stack-divider-light',
-	dark: 'stack-divider-dark',
-	primary: 'stack-divider-primary',
+  gray: 'stack-divider-gray',
+  light: 'stack-divider-light',
+  dark: 'stack-divider-dark',
+  primary: 'stack-divider-primary',
 };
 
 // 构建最终类名
 const stackClasses = [
-	'stack',
-	alignClasses[align as AlignType],
-	gapClasses[gap as GapSize],
-	dividers ? `stack-divider ${dividerColorClasses[dividerColor as DividerColor]}` : '',
-	className,
+  'stack',
+  alignClasses[align as AlignType],
+  gapClasses[gap as GapSize],
+  dividers
+    ? `stack-divider ${dividerColorClasses[dividerColor as DividerColor]}`
+    : '',
+  className,
 ]
-	.filter(Boolean)
-	.join(' ');
+  .filter(Boolean)
+  .join(' ');
 ---
 
 <div class:list={[stackClasses, classList]} {...rest}>
-	<slot />
+  <slot />
 </div>

package/dist/src-astro/stack/StackBasic.astro

@@ -0,0 +1,21 @@
+---
+import Stack from './Stack.astro';
+---
+
+<Stack gap="md" align="center">
+  <div
+    style="background: #60a5fa; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第一个元素
+  </div>
+  <div
+    style="background: #34d399; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第二个元素
+  </div>
+  <div
+    style="background: #f59e42; color: white; padding: 16px; border-radius: 8px;"
+  >
+    第三个元素
+  </div>
+</Stack>

package/dist/{stack → src-astro/stack}/index.ts

@@ -7,5 +7,5 @@ export { Stack, StackBasic };
 
 // 导出示例源代码
 export const StackExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Stack'),
+  Basic: extractSimpleExample(BasicSourceCode, 'Stack'),
 };

package/dist/src-astro/team-member/TeamMember.astro

@@ -0,0 +1,137 @@
+---
+/**
+ * @component TeamMember
+ *
+ * @description
+ * TeamMember 组件用于展示单个团队成员的信息，包括姓名、职位、头像、简介和社交媒体链接。
+ * 组件采用卡片式设计，支持悬停效果，并可以链接到成员的社交媒体账号。
+ *
+ * @design
+ * 设计理念：
+ * 1. 个人展示 - 突出展示团队成员的个人信息和形象
+ * 2. 社交连接 - 提供社交媒体链接，方便与团队成员建立联系
+ * 3. 视觉一致性 - 使用卡片组件确保与整体设计风格一致
+ * 4. 交互反馈 - 悬停时提供视觉反馈，增强用户体验
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <TeamMember
+ *   name="张三"
+ *   role="前端开发工程师"
+ *   avatar="/images/avatars/zhangsan.jpg"
+ *   bio="拥有5年前端开发经验，专注于React和Vue生态系统。"
+ * />
+ * ```
+ *
+ * 包含社交媒体链接：
+ * ```astro
+ * <TeamMember
+ *   name="李四"
+ *   role="UI设计师"
+ *   avatar="/images/avatars/lisi.jpg"
+ *   bio="专注于用户体验和界面设计，热爱创造直观易用的产品。"
+ *   socialLinks={[
+ *     { platform: 'github', url: 'https://github.com/lisi' },
+ *     { platform: 'twitter', url: 'https://twitter.com/lisi' },
+ *     { platform: 'linkedin', url: 'https://linkedin.com/in/lisi' }
+ *   ]}
+ * />
+ * ```
+ */
+
+import '../../style.ts';
+import { SocialIcon, Image, Link } from '../../index-astro';
+import type { ImageSource } from '../types/image.ts';
+
+interface SocialLink {
+  /**
+   * 社交媒体平台
+   */
+  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
+  /**
+   * 社交媒体链接URL
+   */
+  url: string;
+}
+
+export interface Props {
+  /**
+   * 团队成员姓名
+   */
+  name: string;
+  /**
+   * 团队成员职位
+   */
+  role: string;
+  /**
+   * 团队成员头像
+   */
+  avatar: ImageSource;
+  /**
+   * 团队成员简介
+   */
+  bio: string;
+  /**
+   * 社交媒体链接
+   */
+  socialLinks?: SocialLink[];
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  name,
+  role,
+  avatar,
+  bio,
+  socialLinks,
+  class: className = '',
+} = Astro.props;
+---
+
+<div
+  class:list={[
+    'cosy:card cosy:bg-base-100 cosy:shadow-md cosy:hover:shadow-lg cosy:transition-shadow cosy:duration-300',
+    className,
+  ]}>
+  <figure class="cosy:flex cosy:justify-center cosy:p-4">
+    <Image
+      src={avatar}
+      alt={`${name}'s avatar`}
+      width={192}
+      height={192}
+      rounded="xl"
+      transition="fade"
+      hover="brightness"
+      class="cosy:object-cover cosy:aspect-square"
+    />
+  </figure>
+  <div
+    class="cosy:px-6 cosy:py-4 cosy:card-body cosy:flex cosy:flex-col cosy:items-center">
+    <h2 class="cosy:mb-1 cosy:font-semibold cosy:text-xl cosy:card-title">
+      {name}
+    </h2>
+    <p class="cosy:mb-3 cosy:text-sm cosy:text-base-content/70">{role}</p>
+    <p class="cosy:mb-4 cosy:text-base">{bio}</p>
+
+    {
+      socialLinks && socialLinks.length > 0 && (
+        <div class="cosy:flex cosy:gap-3 cosy:mt-auto">
+          {socialLinks.map((link: SocialLink) => (
+            <Link
+              href={link.url}
+              external
+              variant="ghost"
+              class="cosy:hover:bg-base-200 cosy:p-2 cosy:rounded-full"
+              aria-label={`Visit ${name}'s ${link.platform} profile`}>
+              <SocialIcon platform={link.platform} class="cosy:w-5 cosy:h-5" />
+            </Link>
+          ))}
+        </div>
+      )
+    }
+  </div>
+</div>

package/dist/src-astro/team-member/TeamMemberBasic.astro

@@ -0,0 +1,25 @@
+---
+/**
+ * @component TeamMember.Basic
+ *
+ * @description
+ * 基础的团队成员展示组件示例，展示最简单的成员信息展示方式。
+ */
+import '../../style.ts';
+import TeamMember from './TeamMember.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const avatar = getExampleImage({
+  width: 200,
+  height: 200,
+  provider: 'robohash',
+  randomSeed: 'member1',
+});
+---
+
+<TeamMember
+  name="张三"
+  role="产品设计师"
+  avatar={avatar}
+  bio="专注于用户体验设计，拥有5年产品设计经验"
+/>

package/dist/src-astro/team-member/TeamMemberCustomStyle.astro

@@ -0,0 +1,26 @@
+---
+/**
+ * @component TeamMember.CustomStyle
+ *
+ * @description
+ * 自定义样式的团队成员展示组件示例，展示如何使用class属性自定义样式。
+ */
+import '../../style.ts';
+import TeamMember from './TeamMember.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const avatar = getExampleImage({
+  width: 200,
+  height: 200,
+  provider: 'robohash',
+  randomSeed: 'member3',
+});
+---
+
+<TeamMember
+  name="王五"
+  role="市场总监"
+  avatar={avatar}
+  bio="负责产品市场策略和品牌推广，拥有丰富的市场营销经验"
+  class="cosy:bg-gradient-to-r cosy:from-purple-100 cosy:to-pink-100 cosy:shadow-lg cosy:w-72"
+/>

package/dist/src-astro/team-member/TeamMemberGroup.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * @component TeamMember.Group
+ *
+ * @description
+ * 团队成员组展示组件示例，展示如何组合多个团队成员。
+ */
+import '../../style.ts';
+import TeamMember from './TeamMember.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const members = [
+  {
+    name: '张三',
+    title: '产品设计师',
+    avatar: getExampleImage({
+      width: 200,
+      height: 200,
+      provider: 'robohash',
+      randomSeed: 'member1',
+    }),
+    description: '专注于用户体验设计，拥有5年产品设计经验',
+  },
+  {
+    name: '李四',
+    title: '高级开发工程师',
+    avatar: getExampleImage({
+      width: 200,
+      height: 200,
+      provider: 'robohash',
+      randomSeed: 'member2',
+    }),
+    description: '全栈开发专家，热爱开源项目，专注于前端框架和性能优化',
+  },
+  {
+    name: '王五',
+    title: '市场总监',
+    avatar: getExampleImage({
+      width: 200,
+      height: 200,
+      provider: 'robohash',
+      randomSeed: 'member3',
+    }),
+    description: '负责产品市场策略和品牌推广，拥有丰富的市场营销经验',
+  },
+];
+---
+
+<div class="cosy:grid cosy:grid-cols-3 md:cosy:grid-cols-3 cosy:gap-8">
+  {
+    members.map((member) => (
+      <TeamMember
+        name={member.name}
+        role={member.title}
+        avatar={member.avatar}
+        bio={member.description}
+      />
+    ))
+  }
+</div>

package/dist/src-astro/team-member/TeamMemberWithSocial.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * @component TeamMember.WithSocial
+ *
+ * @description
+ * 带社交媒体链接的团队成员展示组件示例，展示如何添加社交媒体链接。
+ */
+import '../../style.ts';
+import TeamMember from './TeamMember.astro';
+import { getExampleImage } from '../utils/image.ts';
+
+const avatar = getExampleImage({
+  width: 200,
+  height: 200,
+  provider: 'robohash',
+  randomSeed: 'member2',
+});
+---
+
+<TeamMember
+  name="李四"
+  role="高级开发工程师"
+  avatar={avatar}
+  bio="全栈开发专家，热爱开源项目，专注于前端框架和性能优化"
+  socialLinks={[
+    { platform: 'github', url: 'https://github.com' },
+    { platform: 'twitter', url: 'https://twitter.com' },
+    { platform: 'linkedin', url: 'https://linkedin.com' },
+  ]}
+/>