@coffic/cosy-ui 0.7.4 → 0.8.6

package/dist/team-member/TeamMember.astro

@@ -1,135 +0,0 @@
----
-/**
- * @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';
-import type { ImageSource } from '../types/image';
-
-interface SocialLink {
-	/**
-	 * 社交媒体平台
-	 */
-	platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
-	/**
-	 * 社交媒体链接URL
-	 */
-	url: string;
-}
-
-// 自定义图片元数据接口，替代 astro 的 ImageMetadata
-interface CustomImageMetadata {
-	src: string;
-	width: number;
-	height: number;
-	format: 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/team-member/TeamMemberBasic.astro

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

package/dist/team-member/TeamMemberCustomStyle.astro

@@ -1,26 +0,0 @@
----
-/**
- * @component TeamMember.CustomStyle
- *
- * @description
- * 自定义样式的团队成员展示组件示例，展示如何使用class属性自定义样式。
- */
-import '../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image';
-
-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/team-member/TeamMemberGroup.astro

@@ -1,60 +0,0 @@
----
-/**
- * @component TeamMember.Group
- *
- * @description
- * 团队成员组展示组件示例，展示如何组合多个团队成员。
- */
-import '../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image';
-
-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/team-member/TeamMemberWithSocial.astro

@@ -1,30 +0,0 @@
----
-/**
- * @component TeamMember.WithSocial
- *
- * @description
- * 带社交媒体链接的团队成员展示组件示例，展示如何添加社交媒体链接。
- */
-import '../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../utils/image';
-
-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' },
-	]}
-/>

package/dist/team-member/TeamMembers.astro

@@ -1,104 +0,0 @@
----
-/**
- * @component TeamMembers
- *
- * @description
- * TeamMembers 组件用于展示团队成员列表，以网格布局呈现多个 TeamMember 组件。
- * 支持响应式布局，可以根据屏幕大小自动调整列数。
- *
- * @design
- * 设计理念：
- * 1. 一致性展示 - 以统一的卡片形式展示团队成员信息
- * 2. 响应式布局 - 在不同屏幕尺寸下自动调整列数
- * 3. 灵活配置 - 支持自定义列数和样式
- *
- * @usage
- * 基本用法：
- * ```astro
- * <TeamMembers members={teamData} />
- * ```
- *
- * 自定义列数：
- * ```astro
- * <TeamMembers members={teamData} columns={2} />
- * ```
- *
- * 添加自定义类名：
- * ```astro
- * <TeamMembers members={teamData} class="mt-8" />
- * ```
- */
-
-import TeamMember from './TeamMember.astro';
-import '../style.ts';
-import type { ImageSource } from '../types/image';
-
-// 自定义图片元数据接口
-interface ImageMetadata {
-	src: string;
-	width: number;
-	height: number;
-	format: string;
-}
-
-interface SocialLink {
-	platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
-	url: string;
-}
-
-interface TeamMemberData {
-	name: string;
-	role: string;
-	avatar: ImageSource;
-	bio: string;
-	socialLinks?: SocialLink[];
-}
-
-interface Props {
-	/**
-	 * 团队成员数据数组
-	 */
-	members: TeamMemberData[];
-	/**
-	 * 网格列数
-	 * @default 3
-	 */
-	columns?: 2 | 3 | 4;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const { members, columns = 3, class: className = '' } = Astro.props;
-
-// 使用类型断言确保 columns 是有效的键
-const columnsValue = columns as 2 | 3 | 4;
-
-// 根据列数生成对应的类名
-const getGridClasses = (cols: 2 | 3 | 4) => {
-	const baseClass = 'cosy:grid-cols-1';
-	const mdClass = 'cosy:md:grid-cols-2';
-
-	let lgClass = 'cosy:lg:grid-cols-3';
-	if (cols === 2) {
-		lgClass = 'cosy:lg:grid-cols-2';
-	} else if (cols === 4) {
-		lgClass = 'cosy:lg:grid-cols-4';
-	}
-
-	return [baseClass, mdClass, lgClass];
-};
----
-
-<div class:list={['cosy:w-full cosy:mx-auto cosy:px-4', className]}>
-	<div class:list={['cosy:grid cosy:gap-6', ...getGridClasses(columnsValue)]}>
-		{
-			members.map((member: TeamMemberData) => (
-				<div class="cosy:transition-all cosy:hover:-translate-y-1 cosy:duration-300 cosy:transform">
-					<TeamMember {...member} />
-				</div>
-			))
-		}
-	</div>
-</div>

package/dist/team-member/index.ts

@@ -1,23 +0,0 @@
-import TeamMember from './TeamMember.astro';
-import TeamMemberBasic from './TeamMemberBasic.astro';
-import TeamMemberWithSocial from './TeamMemberWithSocial.astro';
-import TeamMemberCustomStyle from './TeamMemberCustomStyle.astro';
-import TeamMemberGroup from './TeamMemberGroup.astro';
-import TeamMemebrs from './TeamMembers.astro';
-
-import BasicSourceCode from './TeamMemberBasic.astro?raw';
-import WithSocialSourceCode from './TeamMemberWithSocial.astro?raw';
-import CustomStyleSourceCode from './TeamMemberCustomStyle.astro?raw';
-import GroupSourceCode from './TeamMemberGroup.astro?raw';
-
-import { extractSimpleExample } from '../utils/component';
-
-export { TeamMember, TeamMemberBasic, TeamMemberWithSocial, TeamMemberCustomStyle, TeamMemberGroup, TeamMemebrs };
-
-// Export example codes
-export const TeamMemberExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'TeamMember'),
-  WithSocial: extractSimpleExample(WithSocialSourceCode, 'TeamMember'),
-  CustomStyle: extractSimpleExample(CustomStyleSourceCode, 'TeamMember'),
-  Group: extractSimpleExample(GroupSourceCode, 'TeamMember'),
-};

package/dist/text/Text.astro

@@ -1,189 +0,0 @@
----
-/**
- * @component Text
- *
- * @description
- * Text 组件用于创建各种文本元素，提供一致的排版样式和灵活的定制选项。
- *
- * @design
- * 设计理念：
- * 1. 一致性 - 确保整个应用中文本样式的一致性
- * 2. 可读性 - 优化文本的可读性和舒适度
- * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
- * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容
- *
- * 视觉特点：
- * - 不同的字体大小和行高
- * - 可选的字体粗细和样式
- * - 可定制的颜色和对齐方式
- * - 支持截断和省略号
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Text>这是一段普通文本</Text>
- * ```
- *
- * 不同大小：
- * ```astro
- * <Text size="xs">超小文本</Text>
- * <Text size="sm">小文本</Text>
- * <Text size="md">中等文本</Text>
- * <Text size="lg">大文本</Text>
- * <Text size="xl">超大文本</Text>
- * ```
- *
- * 不同颜色：
- * ```astro
- * <Text color="primary">主要颜色文本</Text>
- * <Text color="secondary">次要颜色文本</Text>
- * <Text color="accent">强调色文本</Text>
- * <Text color="muted">柔和色文本</Text>
- * ```
- *
- * 字体粗细：
- * ```astro
- * <Text weight="light">细体文本</Text>
- * <Text weight="normal">常规文本</Text>
- * <Text weight="medium">中等粗文本</Text>
- * <Text weight="semibold">半粗体文本</Text>
- * <Text weight="bold">粗体文本</Text>
- * ```
- *
- * 文本对齐：
- * ```astro
- * <Text align="left">左对齐文本</Text>
- * <Text align="center">居中对齐文本</Text>
- * <Text align="right">右对齐文本</Text>
- * <Text align="justify">两端对齐文本</Text>
- * ```
- *
- * 文本截断：
- * ```astro
- * <Text truncate>这是一段很长的文本，将会被截断并显示省略号...</Text>
- * ```
- *
- * 组合使用：
- * ```astro
- * <Text
- *   size="lg"
- *   color="primary"
- *   weight="bold"
- *   align="center"
- *   class="my-4"
- * >
- *   这是一段重要的提示文本
- * </Text>
- * ```
- *
- * @props
- * @prop {string} [as='p'] - 要渲染的HTML元素，如 'p', 'span', 'div' 等
- * @prop {'xs'|'sm'|'md'|'lg'|'xl'} [size='md'] - 文本大小
- * @prop {'light'|'normal'|'medium'|'semibold'|'bold'} [weight='normal'] - 字体粗细
- * @prop {'default'|'primary'|'secondary'|'accent'|'muted'} [color='default'] - 文本颜色
- * @prop {'left'|'center'|'right'|'justify'} [align='left'] - 文本对齐方式
- * @prop {boolean} [italic=false] - 是否使用斜体
- * @prop {boolean} [underline=false] - 是否添加下划线
- * @prop {boolean} [truncate=false] - 是否截断文本并显示省略号
- * @prop {string} [class] - 自定义 CSS 类名
- *
- * @slots
- * @slot default - 文本内容
- *
- * @accessibility
- * - 使用语义化的HTML元素
- * - 确保文本颜色与背景色的对比度符合WCAG标准
- */
-
-import '../style.ts';
-
-export interface Props {
-	as?: string;
-	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
-	color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
-	align?: 'left' | 'center' | 'right' | 'justify';
-	italic?: boolean;
-	underline?: boolean;
-	truncate?: boolean;
-	class?: string;
-}
-
-const {
-	as: Element = 'p',
-	size = 'md',
-	weight = 'normal',
-	color = 'default',
-	align = 'left',
-	italic = false,
-	underline = false,
-	truncate = false,
-	class: className = '',
-} = Astro.props;
-
-// 根据大小设置样式
-const sizeClasses = {
-	xs: 'cosy:text-xs',
-	sm: 'cosy:text-sm',
-	md: 'cosy:text-base',
-	lg: 'cosy:text-lg',
-	xl: 'cosy:text-xl',
-};
-const sizeClass = sizeClasses[size as keyof typeof sizeClasses];
-
-// 根据粗细设置样式
-const weightClasses = {
-	light: 'cosy:font-light',
-	normal: 'cosy:font-normal',
-	medium: 'cosy:font-medium',
-	semibold: 'cosy:font-semibold',
-	bold: 'cosy:font-bold',
-};
-const weightClass = weightClasses[weight as keyof typeof weightClasses];
-
-// 根据颜色设置样式
-const colorClasses = {
-	default: 'cosy:text-gray-900 cosy:dark:text-gray-100',
-	primary: 'cosy:text-primary-600 cosy:dark:text-primary-400',
-	secondary: 'cosy:text-secondary-600 cosy:dark:text-secondary-400',
-	accent: 'cosy:text-accent-600 cosy:dark:text-accent-400',
-	muted: 'cosy:text-gray-600 cosy:dark:text-gray-400',
-};
-const colorClass = colorClasses[color as keyof typeof colorClasses];
-
-// 根据对齐方式设置样式
-const alignClasses = {
-	left: 'cosy:text-left',
-	center: 'cosy:text-center',
-	right: 'cosy:text-right',
-	justify: 'cosy:text-justify',
-};
-const alignClass = alignClasses[align as keyof typeof alignClasses];
-
-// 其他样式
-const italicClass = italic ? 'cosy:italic' : '';
-const underlineClass = underline ? 'cosy:underline' : '';
-const truncateClass = truncate ? 'cosy:truncate' : '';
-
-// 组合所有类名
-const combinedClass = `text ${sizeClass} ${weightClass} ${colorClass} ${alignClass} ${italicClass} ${underlineClass} ${truncateClass} ${className}`;
----
-
-<Element class={combinedClass}>
-	<slot />
-</Element>
-
-<style>
-	.text {
-		margin-bottom: 1em;
-		line-height: 1.5;
-	}
-
-	/* 确保截断文本正常工作 */
-	.truncate {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 100%;
-	}
-</style>

package/dist/text/TextBasic.astro

@@ -1,12 +0,0 @@
----
-import Text from './Text.astro';
----
-
-<Text>这是一段普通文本</Text>
-<Text size="xl" color="primary" weight="bold">超大主色粗体文本</Text>
-<Text size="sm" color="secondary" italic>小号次色斜体文本</Text>
-<Text size="lg" align="center" underline>居中大号带下划线文本</Text>
-<Text size="md" weight="light" color="muted">中号柔和色细体文本</Text>
-<Text truncate style="max-width: 120px; display: block;"
-	>这是一段很长的文本，将会被截断并显示省略号...</Text
->

package/dist/text/TextSizes.astro

@@ -1,11 +0,0 @@
----
-import Text from './Text.astro';
----
-
-<div class="cosy:space-y-4">
-	<Text size="xs">超小号文本 (xs)</Text>
-	<Text size="sm">小号文本 (sm)</Text>
-	<Text size="md">中号文本 (md)</Text>
-	<Text size="lg">大号文本 (lg)</Text>
-	<Text size="xl">超大号文本 (xl)</Text>
-</div>

package/dist/text/index.ts

@@ -1,11 +0,0 @@
-import Text from './Text.astro';
-import TextBasic from './TextBasic.astro';
-import BasicSourceCode from './TextBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export { Text, TextBasic };
-
-// 导出示例源代码
-export const TextExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Text'),
-};

package/dist/theme-switcher/ThemeItem.astro

@@ -1,45 +0,0 @@
----
-/**
- * @component ThemeItem
- *
- * @description
- * ThemeItem 组件用于主题切换菜单中的单个主题项。
- * 它基于 Button 组件，提供了主题切换的交互功能。
- *
- * @usage
- * 基本用法：
- * ```astro
- * <ThemeItem theme="light" label="浅色主题" />
- * <ThemeItem theme="dark" label="深色主题" />
- * ```
- */
-
-import { Button } from '../index';
-import '../style.ts';
-
-interface Props {
-	/**
-	 * 主题名称
-	 */
-	theme: string;
-	/**
-	 * 显示的标签文本
-	 */
-	label: string;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-}
-
-const { theme, label, class: className = '' } = Astro.props;
----
-
-<Button
-	variant="ghost"
-	size="sm"
-	block
-	class={`cosy:text-left cosy:justify-start ${className} cosy:theme-item`}
-	data-theme={theme}>
-	{label}
-</Button>