@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/alert-dialog-vue/AlertDialog.vue

@@ -1,120 +0,0 @@
-<!--
-@component AlertDialog
-
-@description
-AlertDialog 组件用于显示简单的确认对话框，支持国际化，带有淡入淡出动画效果。
-
-@usage
-基本用法：
-```vue
-<AlertDialog v-model="showDialog" message="操作已完成" />
-```
-
-指定语言：
-```vue
-<AlertDialog v-model="showDialog" message="Operation completed" lang="en" />
-```
-
-组合使用：
-```vue
-<template>
-  <button @click="showDialog = true">显示对话框</button>
-  <AlertDialog v-model="showDialog" message="确认要继续吗？" />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { AlertDialog } from 'cosy-ui';
-
-const showDialog = ref(false);
-</script>
-```
-
-@props
-@prop {boolean} modelValue - 控制对话框显示状态，支持v-model双向绑定
-@prop {string} message - 对话框显示的消息内容
-@prop {('zh-cn'|'en')} [lang='zh-cn'] - 语言设置，影响按钮文本
-
-@emits
-@emit {update:modelValue} - 当对话框关闭时触发，用于更新v-model绑定值
--->
-
-<script lang="ts">
-import '../../style'
-import { defineComponent } from 'vue'
-
-type MessageKey = 'confirm';
-
-interface Messages {
-    [key: string]: {
-        [key in MessageKey]: string;
-    };
-}
-
-export default defineComponent({
-    name: 'AlertDialog',
-    props: {
-        modelValue: {
-            type: Boolean,
-            required: true
-        },
-        message: {
-            type: String,
-            required: true
-        },
-        lang: {
-            type: String as () => 'zh-cn' | 'en',
-            default: 'zh-cn'
-        }
-    },
-    emits: ['update:modelValue'],
-    setup(props) {
-        // 多语言文本
-        const t = (key: MessageKey) => {
-            const messages: Messages = {
-                'zh-cn': {
-                    confirm: '确定'
-                },
-                'en': {
-                    confirm: 'OK'
-                }
-            };
-            return messages[props.lang][key];
-        };
-
-        return {
-            t
-        };
-    }
-})
-</script>
-
-<template>
-    <Transition name="fade" class="cosy:transition-opacity cosy:duration-200 cosy:ease-in-out">
-        <div v-if="modelValue"
-            class="cosy:fixed cosy:inset-0 cosy:z-50 cosy:flex cosy:items-center cosy:justify-center cosy:opacity-100 cosy:enter:opacity-0 cosy:leave:opacity-0">
-            <!-- 背景遮罩 -->
-            <div class="cosy:absolute cosy:inset-0 cosy:bg-base-200/80 cosy:backdrop-blur-sm"
-                @click="$emit('update:modelValue', false)" />
-
-            <!-- 对话框 -->
-            <div
-                class="cosy:relative cosy:bg-base-100 cosy:rounded-xl cosy:shadow-lg cosy:w-[400px] cosy:transform cosy:transition-all">
-                <!-- 内容区域 -->
-                <div class="cosy:p-6">
-                    <p class="cosy:text-base-content">
-                        {{ message }}
-                    </p>
-                </div>
-
-                <!-- 按钮区域 -->
-                <div class="cosy:flex cosy:border-t cosy:border-base-300">
-                    <button class="cosy:btn cosy:btn-ghost cosy:flex-1 cosy:rounded-none cosy:rounded-b-xl"
-                        @click="$emit('update:modelValue', false)">
-                        {{ t('confirm') }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </Transition>
-</template>

package/dist/alert-dialog-vue/Basic.vue

@@ -1,38 +0,0 @@
-<!--
-@component AlertDialog.Basic
-
-@description
-AlertDialog 组件的基础示例，展示最基本的对话框用法。
-
-@usage
-```vue
-<AlertDialogExamples.Basic />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { ref, defineComponent } from 'vue'
-import AlertDialog from './AlertDialog.vue'
-
-export default defineComponent({
-    name: 'AlertDialogBasicExample',
-    components: {
-        AlertDialog
-    },
-    setup() {
-        const isShow = ref(false)
-
-        return {
-            isShow
-        }
-    }
-})
-</script>
-
-<template>
-    <button @click="isShow = true" class="cosy:btn cosy:btn-primary">
-        显示对话框
-    </button>
-    <AlertDialog v-model="isShow" message="这是一条重要信息" />
-</template>

package/dist/alert-dialog-vue/Multilang.vue

@@ -1,48 +0,0 @@
-<!--
-@component AlertDialog.Multilang
-
-@description
-AlertDialog 组件的多语言示例，展示如何使用不同语言的对话框。
-
-@usage
-```vue
-<AlertDialogExamples.Multilang />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { ref, defineComponent } from 'vue'
-import AlertDialog from './AlertDialog.vue'
-
-export default defineComponent({
-    name: 'AlertDialogMultilangExample',
-    components: {
-        AlertDialog
-    },
-    setup() {
-        const isShowEn = ref(false)
-        const isShowJa = ref(false)
-
-        return {
-            isShowEn,
-            isShowJa
-        }
-    }
-})
-</script>
-
-<template>
-    <div class="flex gap-2">
-        <button @click="isShowEn = true" class="cosy:btn cosy:btn-primary">
-            English
-        </button>
-        <button @click="isShowJa = true" class="cosy:btn cosy:btn-primary">
-            日本語
-        </button>
-    </div>
-
-    <AlertDialog v-model="isShowEn" message="Important information" ok-text="OK" cancel-text="Cancel" />
-
-    <AlertDialog v-model="isShowJa" message="重要なお知らせ" ok-text="確認" cancel-text="キャンセル" />
-</template>

package/dist/alert-dialog-vue/index.ts

@@ -1,20 +0,0 @@
-import Basic from './Basic.vue';
-import Multilang from './Multilang.vue';
-import BasicSource from './Basic.vue?raw';
-import MultilangSource from './Multilang.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 导出主组件
-export { default as AlertDialog } from './AlertDialog.vue';
-
-// 导出示例组件
-export const AlertDialogExamples = {
-	Basic,
-	Multilang,
-};
-
-// 导出示例源代码
-export const AlertDialogExampleCodes = {
-	Basic: extractSimpleExample(BasicSource, 'Basic'),
-	Multilang: extractSimpleExample(MultilangSource, 'Multilang'),
-};

package/dist/article/Article.astro

@@ -1,139 +0,0 @@
----
-/**
- * @component Article
- *
- * @description
- * Article 组件用于展示格式化的文章内容，提供了一套完整的排版样式，使文章内容更易于阅读和理解。
- * 该组件适用于博客文章、文档页面、新闻内容等需要良好排版的场景。
- *
- * @design
- * 设计理念：
- * 1. 可读性优先 - 使用合理的行高、字体大小和间距，提高长文本的阅读体验
- * 2. 层次分明 - 通过不同级别标题的样式区分，建立清晰的内容层次结构
- * 3. 响应式设计 - 在不同设备上保持良好的阅读体验
- * 4. 暗黑模式支持 - 自动适应系统的暗黑模式设置
- *
- * 视觉特点：
- * - 合理的文本行高和段落间距
- * - 标题使用较粗的字重和较小的行高
- * - 列表项有适当的缩进和间距
- * - 引用块使用左侧边框和斜体样式
- * - 代码块和行内代码有不同的背景色
- * - 表格有清晰的边框和背景色区分
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Article>
- *   <h1>文章标题</h1>
- *   <p>这是一段文章内容...</p>
- * </Article>
- * ```
- *
- * 添加自定义类名：
- * ```astro
- * <Article class="my-custom-article">
- *   <h2>带自定义类的文章</h2>
- *   <p>这是一段文章内容...</p>
- * </Article>
- * ```
- *
- * 设置文章宽度：
- * ```astro
- * <Article width="narrow">
- *   <h2>窄宽度文章</h2>
- *   <p>这是一段文章内容...</p>
- * </Article>
- * ```
- *
- * 完整示例：
- * ```astro
- * <Article>
- *   <h1>文章标题</h1>
- *   <p>这是一段介绍性文字，可以包含<a href="#">链接</a>和<code>行内代码</code>。</p>
- *
- *   <h2>二级标题</h2>
- *   <p>这是二级标题下的段落内容。</p>
- *
- *   <blockquote>
- *     这是一段引用内容，可以用来强调重要信息或引用他人的话。
- *   </blockquote>
- *
- *   <h3>三级标题</h3>
- *   <ul>
- *     <li>无序列表项一</li>
- *     <li>无序列表项二</li>
- *   </ul>
- *
- *   <h4>四级标题</h4>
- *   <ol>
- *     <li>有序列表项一</li>
- *     <li>有序列表项二</li>
- *   </ol>
- *
- *   <pre><code>// 这是一个代码块
- * function example() {
- *   return "示例代码";
- * }</code></pre>
- * </Article>
- * ```
- *
- * @props
- * @prop {string} [class] - 自定义 CSS 类名，会与组件内置的类名合并
- * @prop {string} [width="medium"] - 文章宽度，可选值为 "narrow"(窄), "medium"(中等), "wide"(宽), "full"(全宽)
- *
- * @slots
- * @slot default - 文章内容，可以包含任何 HTML 元素
- *
- * @cssFeatures
- * 组件支持的 HTML 元素样式：
- * - 标题 (h1-h6)：不同级别的标题有不同的大小和间距
- * - 段落 (p)：适当的行高和段落间距
- * - 列表 (ul, ol, li)：合理的缩进和项目间距
- * - 链接 (a)：带下划线的彩色文本
- * - 引用块 (blockquote)：带左侧边框的斜体文本
- * - 代码 (code, pre)：带背景色的等宽字体
- * - 图片 (img)：自适应宽度
- * - 水平线 (hr)：简洁的分隔线
- * - 表格 (table, th, td)：清晰的表格样式
- *
- * @accessibility
- * - 使用语义化的 article 元素作为容器
- * - 保持足够的颜色对比度，确保在不同模式下的可读性
- * - 支持系统的暗黑模式设置
- */
-
-// 导入样式
-import '../style.ts';
-import type { IArticleProps } from '../types/article';
-
-export interface Props extends IArticleProps {}
-
-const { class: className = '', width = 'medium', style = '' } = Astro.props;
-
-// 根据宽度设置对应的 Tailwind 类名
-const widthClasses = {
-	narrow: 'cosy:max-w-2xl',
-	medium: 'cosy:max-w-4xl',
-	wide: 'cosy:max-w-6xl',
-	full: 'cosy:w-full',
-}[width];
-
-// 基础样式类
-const baseClasses = [
-	'cosy:prose', // 使用 Tailwind Typography 插件的基础类
-	'cosy:prose-slate',
-	'cosy:w-full',
-	'cosy:mx-auto',
-	'cosy:dark:prose-invert', // 暗黑模式支持,
-	'cosy:m-0',
-	'cosy:min-h-screen',
-	'cosy:pb-96',
-	widthClasses,
-	className,
-];
----
-
-<article class:list={baseClasses} style={style}>
-	<slot />
-</article>

package/dist/article/ArticleBasic.astro

@@ -1,31 +0,0 @@
----
-import Article from './Article.astro';
----
-
-<Article>
-	<h1>文章标题</h1>
-	<p>这是一段介绍性文字，可以包含<a href="#">链接</a>和<code>行内代码</code>。</p>
-
-	<h2>二级标题</h2>
-	<p>这是二级标题下的段落内容。</p>
-
-	<blockquote>这是一段引用内容，可以用来强调重要信息或引用他人的话。</blockquote>
-
-	<h3>三级标题</h3>
-	<ul>
-		<li>无序列表项一</li>
-		<li>无序列表项二</li>
-	</ul>
-
-	<h4>四级标题</h4>
-	<ol>
-		<li>有序列表项一</li>
-		<li>有序列表项二</li>
-	</ol>
-
-	<pre><code>// 这是一个代码块
-function example() &#123;
-  return "示例代码";
-&#125;
-</code></pre>
-</Article>

package/dist/article/index.ts

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

package/dist/assets/iconData.ts

@@ -1,116 +0,0 @@
-/**
- * 图标数据共享文件
- * 这个文件包含所有图标的SVG路径数据
- * 供Astro和Vue组件共同使用
- */
-
-export interface IconData {
-	/**
-	 * 图标路径数据
-	 */
-	path: string;
-	/**
-	 * 额外的视图框设置，默认为"0 0 24 24"
-	 */
-	viewBox?: string;
-}
-
-export const iconData: Record<string, IconData> = {
-	// 警告三角形图标
-	alertTriangle: {
-		path: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
-	},
-
-	// 成功检查图标
-	checkCircle: {
-		path: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
-	},
-
-	// 信息图标
-	infoCircle: {
-		path: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
-	},
-
-	// 错误图标
-	xCircle: {
-		path: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',
-	},
-
-	// 搜索图标
-	search: {
-		path: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
-	},
-
-	// 设置图标
-	settings: {
-		path: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
-	},
-
-	// 信息图标
-	info: {
-		path: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
-	},
-
-	// 用户图标
-	user: {
-		path: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
-	},
-
-	// 菜单图标
-	menu: {
-		path: 'M4 6h16M4 12h16M4 18h16',
-	},
-
-	// 关闭图标
-	close: {
-		path: 'M6 18L18 6M6 6l12 12',
-	},
-
-	// 检查图标
-	check: {
-		path: 'M5 13l4 4L19 7',
-	},
-
-	// 下拉图标
-	chevronDown: {
-		path: 'M19 9l-7 7-7-7',
-	},
-
-	// 日历图标
-	calendar: {
-		path: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
-	},
-
-	// 链接图标
-	link: {
-		path: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
-	},
-
-	// 剪贴板图标
-	clipboard: {
-		path: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
-	},
-
-	// 收件箱归档图标
-	inboxArchive: {
-		path: 'M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4',
-	},
-
-	// GitHub 图标
-	github: {
-		path: 'M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z',
-	},
-
-	// 领英图标
-	linkedin: {
-		path: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
-	},
-
-	// Twitter 图标
-	twitter: {
-		path: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
-	},
-
-	sunCloudy: {
-		path: 'M9.98392 5.05991C11.1323 3.22236 13.1734 2 15.5 2C19.0899 2 22 4.91015 22 8.5C22 9.58031 21.7365 10.5991 21.2701 11.4955C22.3351 12.4985 23 13.9216 23 15.5C23 18.5376 20.5376 21 17.5 21H9C4.58172 21 1 17.4183 1 13C1 8.58172 4.58172 5 9 5C9.33312 5 9.66149 5.02036 9.98392 5.05991ZM12.0554 5.60419C14.0675 6.43637 15.6662 8.06578 16.4576 10.0986C16.7951 10.0339 17.1436 10 17.5 10C18.2351 10 18.9366 10.1442 19.5776 10.4059C19.8486 9.82719 20 9.18128 20 8.5C20 6.01472 17.9853 4 15.5 4C14.1177 4 12.8809 4.6233 12.0554 5.60419ZM17.5 19C19.433 19 21 17.433 21 15.5C21 13.567 19.433 12 17.5 12C16.5205 12 15.6351 12.4023 14.9998 13.0507C14.9999 13.0338 15 13.0169 15 13C15 9.68629 12.3137 7 9 7C5.68629 7 3 9.68629 3 13C3 16.3137 5.68629 19 9 19H17.5Z'}
-};

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>