@coffic/cosy-ui 0.7.4 → 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/src-astro/sidebar-nav/index.ts

@@ -0,0 +1,11 @@
+import SidebarNav from './SidebarNav.astro';
+import SidebarNavBasic from './SidebarNavBasic.astro';
+import BasicSourceCode from './SidebarNavBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { SidebarNav, SidebarNavBasic };
+
+// 导出示例源代码
+export const SidebarNavExampleCodes = {
+  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/src-astro/speak/index.ts

@@ -0,0 +1,14 @@
+import Speak from './Speak.astro';
+import SpeakBasic from './SpeakBasic.astro';
+import SpeakGrid from './SpeakGrid.astro';
+import BasicSourceCode from './SpeakBasic.astro?raw';
+import GridSourceCode from './SpeakGrid.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Speak, SpeakBasic, SpeakGrid };
+
+// 导出示例源代码
+export const SpeakExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'Speak'),
+  Grid: extractSimpleExample(GridSourceCode, 'Speak'),
+};

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

@@ -0,0 +1,153 @@
+---
+/**
+ * @component Stack
+ *
+ * @description
+ * Stack 组件是一个垂直堆叠布局组件，用于垂直排列元素并控制它们之间的间距。
+ * 它提供了灵活的间距控制、对齐方式和分隔线选项，使垂直布局更加简单。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简化布局 - 提供简单直观的方式创建垂直堆叠布局
+ * 2. 一致性 - 通过预设的间距选项确保布局一致性
+ * 3. 灵活性 - 支持多种对齐方式和分隔线选项
+ * 4. 可组合性 - 可以与其他布局组件组合使用
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Stack>
+ *   <div>第一个元素</div>
+ *   <div>第二个元素</div>
+ *   <div>第三个元素</div>
+ * </Stack>
+ * ```
+ *
+ * 自定义间距：
+ * ```astro
+ * <Stack gap="lg">
+ *   <div>大间距</div>
+ *   <div>垂直排列</div>
+ * </Stack>
+ * ```
+ *
+ * 带分隔线：
+ * ```astro
+ * <Stack dividers={true} dividerColor="primary">
+ *   <div>带分隔线的堆叠</div>
+ *   <div>使用主题色</div>
+ * </Stack>
+ * ```
+ *
+ * 自定义对齐：
+ * ```astro
+ * <Stack align="center">
+ *   <div>居中对齐</div>
+ *   <div>的元素</div>
+ * </Stack>
+ * ```
+ */
+
+// 导入样式
+import '../../style.ts';
+
+// 定义间距类型
+type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+// 定义对齐方式类型
+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;
+}
+
+const {
+  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',
+};
+
+// 对齐方式映射
+const alignClasses: Record<AlignType, string> = {
+  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',
+};
+
+// 构建最终类名
+const stackClasses = [
+  'stack',
+  alignClasses[align as AlignType],
+  gapClasses[gap as GapSize],
+  dividers
+    ? `stack-divider ${dividerColorClasses[dividerColor as DividerColor]}`
+    : '',
+  className,
+]
+  .filter(Boolean)
+  .join(' ');
+---
+
+<div class:list={[stackClasses, classList]} {...rest}>
+  <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/src-astro/stack/index.ts

@@ -0,0 +1,11 @@
+import Stack from './Stack.astro';
+import StackBasic from './StackBasic.astro';
+import BasicSourceCode from './StackBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Stack, StackBasic };
+
+// 导出示例源代码
+export const StackExampleCodes = {
+  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' },
+  ]}
+/>