@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/banner/Banner.astro

@@ -1,165 +0,0 @@
----
-/**
- * @component Banner
- *
- * @description
- * Banner 组件用于在页面中展示醒目的横幅信息，通常用于展示重要的标语、公告或营销信息。
- * 组件设计简洁大方，具有平滑的动画效果，能够吸引用户注意力。
- *
- * @design
- * 设计理念：
- * 1. 视觉冲击力 - 使用大号字体和醒目的背景，确保信息能够被用户注意到
- * 2. 简洁明了 - 简单的布局和充足的留白，让信息更容易被理解
- * 3. 动态效果 - 支持多种动画效果选择
- * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可读性
- *
- * 视觉特点：
- * - 圆角设计：柔和的视觉效果
- * - 悬停效果：轻微放大和阴影增强，提供交互反馈
- * - 动画效果：支持淡入、上滑或组合动画
- * - 模糊背景：半透明背景配合模糊效果，现代感强
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Banner>欢迎使用我们的服务</Banner>
- * ```
- *
- * 指定动画效果：
- * ```astro
- * <Banner animation="fade">淡入效果的横幅</Banner>
- * ```
- *
- * @slots
- * @slot default - Banner 中显示的文本内容
- *
- * @accessibility
- * - 使用适当的字体大小和行高，确保文本可读性
- * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
- */
-
-import '../style.ts';
-
-interface Props {
-	/**
-	 * 自定义CSS类，可用于覆盖默认样式
-	 */
-	class?: string;
-
-	/**
-	 * 背景颜色，默认为primary
-	 */
-	bgColor?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
-
-	/**
-	 * 文本颜色，默认根据背景色自动设置
-	 */
-	textColor?: string;
-
-	/**
-	 * 动画效果类型，可选值：
-	 * - 'none': 无动画
-	 * - 'fade': 仅淡入效果
-	 * - 'slide': 仅上滑效果
-	 * - 'both': 淡入和上滑效果
-	 * 默认为'both'
-	 */
-	animation?: 'none' | 'fade' | 'slide' | 'both';
-
-	/**
-	 * @deprecated 使用animation属性替代
-	 */
-	animated?: boolean;
-}
-
-const {
-	class: className = '',
-	bgColor = 'primary',
-	textColor = '',
-	animation = 'both',
-	animated, // 向后兼容
-} = Astro.props;
-
-// 处理向后兼容
-const effectiveAnimation = animated === false ? 'none' : animation;
-
-// 根据背景色自动设置文本颜色
-const getTextColorClass = () => {
-	if (textColor) return `cosy:text-${textColor}`;
-
-	// 对于深色背景，使用白色文本
-	const darkBgColors = ['primary', 'secondary', 'accent', 'error'];
-	return darkBgColors.includes(bgColor) ? 'cosy:text-white' : 'cosy:text-gray-800';
-};
-
-// 组合CSS类
-const bannerClasses = [
-	'cosy:w-full',
-	'cosy:py-8',
-	'cosy:px-4',
-	'cosy:rounded-lg',
-	'cosy:text-center',
-	'cosy:text-2xl',
-	'cosy:md:text-3xl',
-	'cosy:font-bold',
-	'cosy:transition-all',
-	'cosy:duration-300',
-	'cosy:ease-in-out',
-	'cosy:backdrop-blur-sm',
-	'cosy:bg-opacity-90',
-	'cosy:shadow-md',
-	'cosy:hover:shadow-lg',
-	'cosy:hover:scale-[1.01]',
-	`cosy:bg-${bgColor}`,
-	getTextColorClass(),
-	className,
-].join(' ');
-
-// 动画类
-const animationClasses = {
-	none: '',
-	fade: 'cosy:animate-fadeIn',
-	slide: 'cosy:animate-slideUp',
-	both: 'cosy:animate-fadeIn cosy:animate-slideUp',
-}[effectiveAnimation];
----
-
-<div class={`${bannerClasses} ${animationClasses}`}>
-	<slot />
-</div>
-
-<style>
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	@keyframes slideUp {
-		from {
-			transform: translateY(20px);
-		}
-		to {
-			transform: translateY(0);
-		}
-	}
-
-	/* 动画类 */
-	.cosy\:animate-fadeIn {
-		animation: fadeIn 0.8s ease-in-out;
-	}
-
-	.cosy\:animate-slideUp {
-		animation: slideUp 0.5s ease-out;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.cosy\:animate-fadeIn,
-		.cosy\:animate-slideUp {
-			animation: none;
-		}
-	}
-</style>

package/dist/banner/BannerAllAnimations.astro

@@ -1,10 +0,0 @@
----
-import { Banner } from '../index';
----
-
-<div class="flex flex-col gap-4">
-	<Banner animation="none">这是一个没有动画的横幅</Banner>
-	<Banner animation="fade">这是一个只有淡入动画的横幅</Banner>
-	<Banner animation="slide">这是一个只有上滑动画的横幅</Banner>
-	<Banner animation="both">这是一个同时有淡入和上滑动画的横幅</Banner>
-</div>

package/dist/banner/BannerCustomStyle.astro

@@ -1,7 +0,0 @@
----
-import { Banner } from '../index';
----
-
-<Banner class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold">
-	这是一个自定义样式的横幅
-</Banner>

package/dist/blog/Blog.astro

@@ -1,249 +0,0 @@
----
-/**
- * @component Blog
- *
- * @description
- * Blog 组件是一个用于展示博客文章的容器组件，提供了标题、副标题、作者信息、日期、封面图片和标签等元素的布局。
- * 组件内部使用了响应式设计，确保在不同屏幕尺寸下都有良好的显示效果。
- *
- * @design
- * 设计理念：
- * 1. 内容优先 - 突出展示文章的核心内容和相关元数据
- * 2. 视觉层次 - 通过字体大小、间距和颜色建立清晰的视觉层次
- * 3. 响应式布局 - 自适应不同屏幕尺寸，优化阅读体验
- * 4. 视觉一致性 - 与整体设计系统保持一致的视觉风格
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Blog title="这是一篇博客文章">
- *   <p>这里是博客文章的内容...</p>
- * </Blog>
- * ```
- *
- * 完整用法：
- * ```astro
- * <Blog
- *   title="使用 Astro 构建现代网站"
- *   subtitle="探索 Astro 的强大功能和使用技巧"
- *   author="张三"
- *   date={new Date('2023-12-15')}
- *   cover={{
- *     src: "/images/blog/astro-cover.jpg",
- *     alt: "Astro 框架封面图"
- *   }}
- *   tags={["Astro", "前端", "教程"]}
- * >
- *   <p>这里是博客文章的详细内容...</p>
- * </Blog>
- * ```
- */
-
-import '../style.ts';
-import { UserIcon, CalendarIcon } from '../index';
-
-interface Props {
-	/**
-	 * 文章标题
-	 */
-	title: string;
-	/**
-	 * 文章副标题
-	 */
-	subtitle?: string;
-	/**
-	 * 文章作者
-	 */
-	author?: string;
-	/**
-	 * 发布日期
-	 */
-	date?: Date;
-	/**
-	 * 封面图片
-	 */
-	cover?: {
-		src: string;
-		alt?: string;
-	};
-	/**
-	 * 文章标签
-	 */
-	tags?: string[];
-}
-
-const { title, subtitle, author, date, cover, tags = [] } = Astro.props;
-
-// 格式化日期
-const formatDate = (date?: Date) => {
-	if (!date) return '';
-	return new Intl.DateTimeFormat('zh-CN', {
-		year: 'numeric',
-		month: 'long',
-		day: 'numeric',
-	}).format(date);
-};
----
-
-<article class="article">
-	<header class="article-header">
-		{
-			cover && (
-				<div class="cover-container">
-					<img src={cover.src} alt={cover.alt || title} class="cover-image" />
-				</div>
-			)
-		}
-
-		<div class="header-content">
-			<h1 class="article-title">{title}</h1>
-			{subtitle && <p class="article-subtitle">{subtitle}</p>}
-
-			<div class="article-meta">
-				{
-					author && (
-						<div class="meta-item">
-							<UserIcon size="16px" />
-							<span>{author}</span>
-						</div>
-					)
-				}
-
-				{
-					date && (
-						<div class="meta-item">
-							<CalendarIcon size="16px" />
-							<time datetime={date.toISOString()}>{formatDate(date)}</time>
-						</div>
-					)
-				}
-			</div>
-
-			{
-				tags.length > 0 && (
-					<div class="article-tags">
-						{tags.map((tag: string) => (
-							<span class="tag">{tag}</span>
-						))}
-					</div>
-				)
-			}
-		</div>
-	</header>
-
-	<div class="article-content">
-		<slot />
-	</div>
-</article>
-
-<style>
-	/* 基础样式 */
-	.article {
-		container-type: inline-size;
-	}
-
-	/* 文章头部 */
-	.article-header {
-		margin-bottom: 2rem;
-	}
-
-	/* 封面图片 */
-	.cover-container {
-		position: relative;
-		width: 100%;
-		height: 300px;
-		margin-bottom: 1.5rem;
-		border-radius: 0.5rem;
-		overflow: hidden;
-	}
-
-	.cover-image {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	/* 标题和副标题 */
-	.header-content {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.article-title {
-		font-size: 2.25rem;
-		font-weight: 700;
-		line-height: 1.2;
-		letter-spacing: -0.025em;
-	}
-
-	.article-subtitle {
-		font-size: 1.25rem;
-		color: var(--text-secondary, rgba(0, 0, 0, 0.7));
-	}
-
-	/* 元数据 */
-	.article-meta {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 1rem;
-		font-size: 0.875rem;
-		color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-	}
-
-	.meta-item {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	/* 标签 */
-	.article-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-	}
-
-	.tag {
-		display: inline-block;
-		padding: 0.25rem 0.75rem;
-		border: 1px solid var(--border-color, #e2e8f0);
-		border-radius: 9999px;
-		font-size: 0.75rem;
-		line-height: 1.5;
-	}
-
-	/* 文章内容 */
-	.article-content {
-		max-width: none;
-		font-size: 1.125rem;
-		line-height: 1.75;
-	}
-
-	/* 响应式调整 */
-	@media (min-width: 768px) {
-		.article-title {
-			font-size: 3rem;
-		}
-
-		.cover-container {
-			height: 400px;
-		}
-	}
-
-	/* 暗色主题适配 */
-	@media (prefers-color-scheme: dark) {
-		.article-subtitle {
-			color: var(--text-secondary, rgba(255, 255, 255, 0.7));
-		}
-
-		.article-meta {
-			color: var(--text-secondary, rgba(255, 255, 255, 0.6));
-		}
-
-		.tag {
-			border-color: var(--border-color, #2d3748);
-		}
-	}
-</style>

package/dist/blog/index.ts

@@ -1 +0,0 @@
-export {default as Blog} from './Blog.astro';

package/dist/button/Button.astro

@@ -1,192 +0,0 @@
----
-/**
- * @component Button
- *
- * @description
- * Button 组件用于触发一个即时操作，如表单提交、打开对话框等。
- * 支持多种样式变体、尺寸和状态，可以满足不同场景的需求。
- *
- * @design
- * 设计理念：
- * 1. 直观易用 - 通过视觉差异清晰传达按钮的重要性和功能
- * 2. 响应式交互 - 提供丰富的状态反馈，增强用户体验
- * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
- * 4. 无障碍性 - 确保所有用户都能获得良好体验
- *
- * 视觉特点：
- * - 悬停效果：轻微上浮和阴影增强
- * - 点击效果：轻微下沉
- * - 加载状态：显示加载动画
- * - 多种颜色变体：适应不同场景和语义
- * - 多种尺寸：适应不同布局需求
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Button>默认按钮</Button>
- * <Button variant="primary">主要按钮</Button>
- * ```
- *
- * 不同尺寸：
- * ```astro
- * <Button size="sm">小型按钮</Button>
- * <Button size="lg">大型按钮</Button>
- * ```
- *
- * 状态变化：
- * ```astro
- * <Button disabled>禁用按钮</Button>
- * <Button loading>加载中</Button>
- * ```
- *
- * 带图标：
- * ```astro
- * <Button>
- *   <span slot="icon-left">👈</span>
- *   左侧图标
- * </Button>
- * ```
- *
- * 链接按钮：
- * ```astro
- * <Button href="https://example.com">跳转链接</Button>
- * <Button href="https://example.com" target="_blank">新窗口打开</Button>
- * ```
- */
-
-// 导入样式
-import '../style.ts';
-
-interface Props {
-	variant?:
-		| 'primary'
-		| 'secondary'
-		| 'accent'
-		| 'info'
-		| 'success'
-		| 'warning'
-		| 'error'
-		| 'ghost'
-		| 'link'
-		| 'outline'
-		| 'neutral';
-	size?: 'lg' | 'md' | 'sm' | 'xs';
-	shape?: 'circle' | 'square';
-	wide?: boolean;
-	block?: boolean;
-	loading?: boolean;
-	disabled?: boolean;
-	type?: 'button' | 'submit' | 'reset';
-	class?: string;
-	onClick?: string;
-	formmethod?: string;
-	href?: string;
-	target?: string;
-	[key: string]: any; // 允许任意自定义属性
-}
-
-const {
-	variant = 'primary',
-	size = 'md',
-	shape,
-	wide = false,
-	block = false,
-	loading = false,
-	disabled = false,
-	type = 'button',
-	class: className,
-	onClick,
-	formmethod,
-	href,
-	target,
-	...rest
-} = Astro.props;
-
-// 计算按钮的类名
-const getButtonClasses = () => {
-	const classes = ['cosy:btn'];
-
-	// Variant classes
-	const variantClasses = {
-		primary: 'cosy:btn-primary',
-		secondary: 'cosy:btn-secondary',
-		accent: 'cosy:btn-accent',
-		info: 'cosy:btn-info',
-		success: 'cosy:btn-success',
-		warning: 'cosy:btn-warning',
-		error: 'cosy:btn-error',
-		ghost: 'cosy:btn-ghost',
-		link: 'cosy:btn-link',
-		outline: 'cosy:btn-outline',
-		neutral: 'cosy:btn-neutral',
-	};
-
-	// Size classes
-	const sizeClasses = {
-		lg: 'cosy:btn-lg',
-		md: 'cosy:btn-md',
-		sm: 'cosy:btn-sm',
-		xs: 'cosy:btn-xs',
-	};
-
-	// Shape classes
-	const shapeClasses = {
-		circle: 'cosy:btn-circle',
-		square: 'cosy:btn-square',
-	};
-
-	if (variantClasses[variant]) {
-		classes.push(variantClasses[variant]);
-	}
-
-	if (sizeClasses[size]) {
-		classes.push(sizeClasses[size]);
-	}
-
-	if (shape && shapeClasses[shape]) {
-		classes.push(shapeClasses[shape]);
-	}
-
-	if (wide) classes.push('cosy:btn-wide');
-	if (block) classes.push('cosy:btn-block');
-	if (loading) classes.push('cosy:loading');
-	if (className) classes.push(className);
-
-	return classes;
-};
-
-const buttonClasses = getButtonClasses();
----
-
-{
-	href ? (
-		<a
-			href={href}
-			class:list={buttonClasses}
-			target={target}
-			onclick={onClick}
-			data-variant={variant}
-			{...rest}>
-			<span class="cosy:flex cosy:items-center cosy:gap-2">
-				<slot name="icon-left" />
-				<slot />
-				<slot name="icon-right" />
-			</span>
-		</a>
-	) : (
-		<button
-			type={formmethod === 'dialog' ? 'submit' : type}
-			class:list={buttonClasses}
-			disabled={disabled}
-			onclick={onClick}
-			formmethod={formmethod}
-			data-variant={variant}
-			{...rest}>
-			<span class="cosy:flex cosy:items-center cosy:gap-2">
-				<slot name="icon-left" />
-				<slot />
-				<slot name="icon-right" />
-			</span>
-		</button>
-	)
-}

package/dist/button/ButtonBasic.astro

@@ -1,18 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
-	<Button>默认按钮</Button>
-	<Button variant="primary">主要按钮</Button>
-	<Button variant="secondary">次要按钮</Button>
-	<Button variant="accent">强调按钮</Button>
-	<Button variant="info">信息按钮</Button>
-	<Button variant="success">成功按钮</Button>
-	<Button variant="warning">警告按钮</Button>
-	<Button variant="error">错误按钮</Button>
-	<Button variant="ghost">幽灵按钮</Button>
-	<Button variant="link">链接按钮</Button>
-	<Button variant="outline">轮廓按钮</Button>
-	<Button variant="neutral">中性按钮</Button>
-</div>

package/dist/button/ButtonIconBoth.astro

@@ -1,9 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<Button>
-	<span slot="icon-left">←</span>
-	两侧图标按钮
-	<span slot="icon-right">→</span>
-</Button>

package/dist/button/ButtonShapes.astro

@@ -1,23 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
-	<Button>默认形状</Button>
-
-	<Button shape="circle" variant="primary">
-		<span slot="icon-left">🔄</span>
-	</Button>
-
-	<Button shape="square" variant="success">
-		<span slot="icon-left">✨</span>
-	</Button>
-
-	<Button shape="circle" variant="warning" size="lg">
-		<span slot="icon-left">⚡</span>
-	</Button>
-
-	<Button shape="square" variant="error" size="sm">
-		<span slot="icon-left">❌</span>
-	</Button>
-</div>

package/dist/button/ButtonSizes.astro

@@ -1,15 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<div class="cosy:flex cosy:items-center cosy:gap-2">
-	<Button size="xs">超小按钮</Button>
-	<Button size="sm">小型按钮</Button>
-	<Button size="md">中等按钮</Button>
-	<Button size="lg">大型按钮</Button>
-</div>
-
-<div class="cosy:mt-4 cosy:flex cosy:flex-col cosy:items-center cosy:gap-2">
-	<Button size="lg" wide>宽按钮</Button>
-	<Button block>块级按钮</Button>
-</div>

package/dist/button/ButtonStates.astro

@@ -1,12 +0,0 @@
----
-import Button from './Button.astro';
----
-
-<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
-	<Button>正常按钮</Button>
-	<Button disabled>禁用按钮</Button>
-	<Button loading>加载中</Button>
-	<Button variant="primary" loading>加载中</Button>
-	<Button variant="success" disabled>禁用成功按钮</Button>
-	<Button variant="error" loading>处理错误中</Button>
-</div>