@coffic/cosy-ui 0.8.21 → 0.8.22

package/dist/src-astro/code-container/CodeToolbar.astro

@@ -0,0 +1,100 @@
+---
+import CodeToggleButton from './ButtonCodeToggle.astro';
+import CopyCodeButton from './ButtonCopyCode.astro';
+
+interface Props {
+  titles: string[];
+  activeTab: number;
+  isCodeView: boolean;
+  code: string;
+}
+
+const {
+  titles = [],
+  activeTab = 0,
+  isCodeView = false,
+  code = '',
+} = Astro.props;
+---
+
+<div
+  class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-t">
+  <!-- 标签 -->
+  <div class="cosy:flex cosy:items-center cosy:gap-4">
+    <div role="tablist" class="cosy:tabs cosy:tabs-box">
+      {
+        titles.map((title: string, index: number) => (
+          <button
+            role="tab"
+            class={`cosy:tab ${index === activeTab ? 'cosy:tab-active' : ''}`}
+            data-tab={`tab-${index + 1}`}>
+            {title || `示例 ${index + 1}`}
+          </button>
+        ))
+      }
+    </div>
+  </div>
+  <!-- 工具按钮 -->
+  <div class="cosy:flex cosy:items-center cosy:gap-2">
+    <CodeToggleButton isCodeView={isCodeView} />
+    <CopyCodeButton code={code} />
+  </div>
+</div>
+
+<script>
+  function initializeTab() {
+    console.log('CodeContainer: 初始化标签切换按钮');
+
+    const exampleTabs = document.querySelectorAll(
+      '[role="tab"][data-tab^="tab-"]'
+    );
+    exampleTabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        console.log('CodeContainer: 切换示例', tab.getAttribute('data-tab'));
+        const container = tab.closest('[data-role="code-container"]');
+        if (!container) return;
+
+        // 更新标签状态
+        container
+          .querySelectorAll('[role="tab"][data-tab^="tab-"]')
+          .forEach((t) => {
+            t.classList.remove('cosy:tab-active');
+          });
+        tab.classList.add('cosy:tab-active');
+
+        // 获取当前标签对应的内容 id
+        const targetId = tab.getAttribute('data-tab');
+        if (!targetId) return;
+
+        // 切换示例容器
+        container
+          .querySelectorAll('.cosy\\:example-container')
+          .forEach((example) => {
+            if (example.getAttribute('data-example') === targetId) {
+              example.classList.remove('cosy:hidden');
+              example.classList.add('cosy:block');
+            } else {
+              example.classList.add('cosy:hidden');
+              example.classList.remove('cosy:block');
+            }
+          });
+
+        // 更新对应内容的可见性
+        const allContent = container.querySelectorAll('[id^="tab-"]');
+        allContent.forEach((content) => {
+          if (content.id === targetId) {
+            content.classList.remove('cosy:hidden');
+            content.classList.add('cosy:block');
+          } else {
+            content.classList.add('cosy:hidden');
+            content.classList.remove('cosy:block');
+          }
+        });
+      });
+    });
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    initializeTab();
+  });
+</script>

package/dist/src-astro/code-container/Description.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+  text: string;
+}
+const { text = '' } = Astro.props;
+---
+
+{
+  text && (
+    <p
+      class="cosy:px-6 cosy:py-2 cosy:text-sm not-prose
+      cosy:bg-gradient-to-b cosy:from-blue-100/50 cosy:to-blue-100/90 
+      cosy:dark:from-blue-900/20 cosy:dark:to-blue-900/20">
+      {text}
+    </p>
+  )
+}

package/dist/src-astro/code-container/Preview.astro

@@ -0,0 +1,93 @@
+---
+// 预览组件，渲染slot内容
+---
+
+<div class="cosy:code-example-panel cosy:block" data-panel="preview">
+  <slot />
+</div>
+
+<!-- 样式隔离和重置 -->
+<style>
+  /* 预览区域样式重置，防止外部样式影响内部组件 */
+  [data-role='code-container'] .cosy\:reset-styles {
+    /* 重置所有可能影响布局的样式 */
+    all: initial;
+    font-family: inherit;
+    color: inherit;
+    line-height: 1.5;
+
+    /* 恢复必要的基础样式 */
+    display: block;
+    box-sizing: border-box;
+
+    /* 隔离样式作用域 */
+    isolation: isolate;
+    contain: layout style;
+  }
+
+  /* 重置内部所有元素的样式 */
+  [data-role='code-container'] .cosy\:reset-styles * {
+    all: unset;
+    display: revert;
+    box-sizing: border-box;
+  }
+
+  /* 恢复必要的文本样式 */
+  [data-role='code-container'] .cosy\:reset-styles {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #374151;
+  }
+
+  /* 恢复基本的HTML元素样式 */
+  [data-role='code-container'] .cosy\:reset-styles h1,
+  [data-role='code-container'] .cosy\:reset-styles h2,
+  [data-role='code-container'] .cosy\:reset-styles h3,
+  [data-role='code-container'] .cosy\:reset-styles h4,
+  [data-role='code-container'] .cosy\:reset-styles h5,
+  [data-role='code-container'] .cosy\:reset-styles h6 {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles p {
+    margin-bottom: 1em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles ul,
+  [data-role='code-container'] .cosy\:reset-styles ol {
+    padding-left: 1.5em;
+    margin-bottom: 1em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles li {
+    margin-bottom: 0.25em;
+  }
+
+  /* 防止内部组件的样式泄漏到外部 */
+  [data-role='code-container'] .cosy\:code-preview-area {
+    position: relative;
+    z-index: 0;
+  }
+
+  /* 确保预览区域的样式隔离 */
+  [data-role='code-container'] .cosy\:code-preview-area::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    pointer-events: none;
+    z-index: -1;
+  }
+</style>

package/dist/src-astro/footer/Footer.astro

@@ -172,6 +172,7 @@ import {
   LanguageUtil,
   type IFooterProps,
   createTextGetter,
+  Link,
 } from '../../index-astro';
 import FooterSection from './FooterSection.astro';
 import '../../style.ts';
@@ -242,9 +243,7 @@ const debugClasses = debug
     ]}>
     {/* 品牌区域 */}
     <aside class:list={['cosy:max-w-xs cosy:text-center', debugClasses.aside]}>
-      <a
-        href={homeLink}
-        class="cosy:flex cosy:items-center cosy:gap-2 cosy:mb-4 cosy:no-underline">
+      <Link href={homeLink} align="center" noUnderline block class="cosy:mb-4">
         {
           logo && (
             <img
@@ -260,21 +259,25 @@ const debugClasses = debug
           <h2 class="cosy:font-bold cosy:text-xl">{siteName}</h2>
           <p class="cosy:text-base-content/70">{slogan}</p>
         </div>
-      </a>
+      </Link>
 
       {/* 社交媒体链接 */}
       {
         processedSocialLinks.length > 0 && (
           <div class="cosy:flex cosy:justify-center cosy:gap-2 cosy:mt-4">
             {processedSocialLinks.map((link) => (
-              <a
+              <Link
                 href={link.url}
-                class="cosy:btn cosy:btn-circle cosy:btn-ghost cosy:btn-sm"
-                target="_blank"
+                btn
+                circle
+                ghost
+                size="sm"
+                color="primary"
+                external
                 rel="noopener noreferrer"
                 aria-label={link.name}>
                 <SocialIcon platform={link.platform} />
-              </a>
+              </Link>
             ))}
           </div>
         )
@@ -307,10 +310,10 @@ const debugClasses = debug
           <FooterSection
             title={t('about')}
             links={[
-              { name: t('aboutUs'), href: aboutLink },
-              { name: t('team'), href: teamLink },
-              { name: t('careers'), href: careersLink },
-              { name: t('contactUs'), href: contactLink },
+              { name: t('aboutUs'), href: aboutLink ?? '' },
+              { name: t('team'), href: teamLink ?? '' },
+              { name: t('careers'), href: careersLink ?? '' },
+              { name: t('contactUs'), href: contactLink ?? '' },
             ].filter((link) => link.href)}
           />
         )
@@ -328,11 +331,11 @@ const debugClasses = debug
           <FooterSection
             title={t('resources')}
             links={[
-              { name: t('news'), href: newsLink },
-              { name: t('blog'), href: blogLink },
-              { name: t('faq'), href: faqLink },
-              { name: t('history'), href: historyLink },
-              { name: t('techStack'), href: techStackLink },
+              { name: t('news'), href: newsLink ?? '' },
+              { name: t('blog'), href: blogLink ?? '' },
+              { name: t('faq'), href: faqLink ?? '' },
+              { name: t('history'), href: historyLink ?? '' },
+              { name: t('techStack'), href: techStackLink ?? '' },
             ].filter((link) => link.href)}
           />
         )
@@ -344,8 +347,8 @@ const debugClasses = debug
           <FooterSection
             title={t('legal')}
             links={[
-              { name: t('terms'), href: termsLink },
-              { name: t('privacy'), href: privacyLink },
+              { name: t('terms'), href: termsLink ?? '' },
+              { name: t('privacy'), href: privacyLink ?? '' },
             ].filter((link) => link.href)}
           />
         )
@@ -366,7 +369,7 @@ const debugClasses = debug
 {/* 底部版权信息 */}
 <div
   class:list={[
-    'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300 cosy:text-base-content',
+    'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300',
     debugClasses.footer,
   ]}>
   <aside

package/dist/src-astro/footer/FooterSection.astro

@@ -6,10 +6,7 @@
  * FooterSection 组件用于在页脚中显示一组链接，通常用于导航、产品列表等。
  */
 
-interface Link {
-  name: string;
-  href?: string;
-}
+import { Link, type IProduct } from '../../index-astro';
 
 interface Props {
   /**
@@ -20,7 +17,7 @@ interface Props {
   /**
    * 链接列表
    */
-  links: Link[];
+  links: IProduct[];
 }
 
 const { title, links } = Astro.props;
@@ -33,12 +30,13 @@ const { title, links } = Astro.props;
       links.map((link) => (
         <li class="cosy:list-none">
           {link.href ? (
-            <a
+            <Link
               href={link.href}
-              class="cosy:link cosy:link-hover cosy:no-underline cosy:hover:no-underline"
-            >
+              size="sm"
+              target={link.external ? '_blank' : '_self'}
+              variant="text">
               {link.name}
-            </a>
+            </Link>
           ) : (
             <span class="cosy:opacity-50">{link.name}</span>
           )}

package/dist/src-astro/grid/index.ts

@@ -1,11 +1,3 @@
 import Grid from './Grid.astro';
-import GridBasic from './GridBasic.astro';
-import BasicSourceCode from './GridBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
 
-export { Grid, GridBasic };
-
-// 导出示例源代码
-export const GridExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'Grid'),
-};
+export { Grid };

package/dist/src-astro/heading/index.ts

@@ -1,11 +1,3 @@
 import Heading from './Heading.astro';
-import HeadingBasic from './HeadingBasic.astro';
-import BasicSourceCode from './HeadingBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
 
-export { Heading, HeadingBasic };
-
-// 导出示例源代码
-export const HeadingExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'Heading'),
-};
+export { Heading };

package/dist/src-astro/hero/Hero.astro

@@ -143,7 +143,7 @@
  * @prop {string} links[].text - 链接按钮的文本
  * @prop {string} links[].href - 链接按钮的目标地址
  * @prop {string} links[].variant - 链接按钮的变体，可选值："primary", "secondary", "accent", "info", "success", "warning", "error"
- * @prop {string} [background="gradient"] - 背景样式，可选值："gradient", "plain"
+ * @prop {string} [background="gradient"] - 背景样式，可选值："gradient", "plain", "gradient-primary", "gradient-secondary", "gradient-accent", "gradient-success", "gradient-warning", "gradient-info", "gradient-sky", "gradient-sunset", "gradient-forest", "gradient-ocean", "gradient-mountain", "gradient-flower", "gradient-watermelon", "gradient-lemon", "gradient-grape", "gradient-blueberry", "gradient-mango", "gradient-kiwi", "gradient-pitaya", "gradient-banana"
  * @prop {string} [align="center"] - 内容对齐方式，可选值："center", "left", "right"
  * @prop {string} [imagePosition="right"] - 图片位置，可选值："right", "left", "top", "bottom"
  * @prop {string} [backgroundImage] - 背景图片的URL
@@ -176,7 +176,29 @@ interface Props {
     alt: string;
   };
   links: Link[];
-  background?: 'gradient' | 'plain';
+  background?:
+    | 'gradient'
+    | 'plain'
+    | 'gradient-primary'
+    | 'gradient-secondary'
+    | 'gradient-accent'
+    | 'gradient-success'
+    | 'gradient-warning'
+    | 'gradient-info'
+    | 'gradient-sky'
+    | 'gradient-sunset'
+    | 'gradient-forest'
+    | 'gradient-ocean'
+    | 'gradient-mountain'
+    | 'gradient-flower'
+    | 'gradient-watermelon'
+    | 'gradient-lemon'
+    | 'gradient-grape'
+    | 'gradient-blueberry'
+    | 'gradient-mango'
+    | 'gradient-kiwi'
+    | 'gradient-pitaya'
+    | 'gradient-banana';
   align?: 'center' | 'left' | 'right';
   imagePosition?: 'right' | 'left' | 'top' | 'bottom';
   backgroundImage?: string;
@@ -200,6 +222,49 @@ const {
 // 确保不透明度在0-1之间
 const safeOpacity = Math.max(0, Math.min(1, overlayOpacity));
 
+// 渐变色背景映射
+const gradientBgClassMap = {
+  gradient: 'cosy:bg-gradient-to-br cosy:from-primary/10 cosy:to-secondary/20',
+  'gradient-primary':
+    'cosy:bg-gradient-to-br cosy:from-primary-400 cosy:to-primary-700',
+  'gradient-secondary':
+    'cosy:bg-gradient-to-br cosy:from-secondary-400 cosy:to-secondary-700',
+  'gradient-accent':
+    'cosy:bg-gradient-to-br cosy:from-accent-400 cosy:to-accent-700',
+  'gradient-success':
+    'cosy:bg-gradient-to-br cosy:from-success-400 cosy:to-success-700',
+  'gradient-warning':
+    'cosy:bg-gradient-to-br cosy:from-warning-400 cosy:to-warning-700',
+  'gradient-info': 'cosy:bg-gradient-to-br cosy:from-info-400 cosy:to-info-700',
+  'gradient-sky': 'cosy:bg-gradient-to-br cosy:from-sky-400 cosy:to-indigo-500',
+  'gradient-sunset':
+    'cosy:bg-gradient-to-br cosy:from-orange-400 cosy:via-pink-500 cosy:to-red-500',
+  'gradient-forest':
+    'cosy:bg-gradient-to-br cosy:from-green-700 cosy:to-lime-300',
+  'gradient-ocean':
+    'cosy:bg-gradient-to-br cosy:from-cyan-400 cosy:to-blue-700',
+  'gradient-mountain':
+    'cosy:bg-gradient-to-br cosy:from-gray-400 cosy:to-blue-900',
+  'gradient-flower':
+    'cosy:bg-gradient-to-br cosy:from-pink-300 cosy:via-purple-400 cosy:to-fuchsia-500',
+  'gradient-watermelon':
+    'cosy:bg-gradient-to-br cosy:from-green-300 cosy:via-pink-400 cosy:to-red-500',
+  'gradient-lemon':
+    'cosy:bg-gradient-to-br cosy:from-yellow-200 cosy:via-yellow-400 cosy:to-yellow-600',
+  'gradient-grape':
+    'cosy:bg-gradient-to-br cosy:from-purple-400 cosy:via-indigo-500 cosy:to-purple-700',
+  'gradient-blueberry':
+    'cosy:bg-gradient-to-br cosy:from-blue-400 cosy:via-blue-600 cosy:to-indigo-700',
+  'gradient-mango':
+    'cosy:bg-gradient-to-br cosy:from-yellow-300 cosy:via-orange-400 cosy:to-orange-600',
+  'gradient-kiwi':
+    'cosy:bg-gradient-to-br cosy:from-lime-200 cosy:via-green-400 cosy:to-green-700',
+  'gradient-pitaya':
+    'cosy:bg-gradient-to-br cosy:from-pink-200 cosy:via-fuchsia-400 cosy:to-lime-300',
+  'gradient-banana':
+    'cosy:bg-gradient-to-br cosy:from-yellow-100 cosy:via-yellow-300 cosy:to-yellow-500',
+};
+
 // 确定容器类
 const containerClasses = [
   'cosy:hero',
@@ -207,8 +272,9 @@ const containerClasses = [
   'cosy:w-full',
   'cosy:relative',
   backgroundImage ? 'cosy:bg-cover cosy:bg-center' : '',
-  !backgroundImage && background === 'gradient'
-    ? 'cosy:bg-gradient-to-br cosy:from-primary/10 cosy:to-secondary/20'
+  !backgroundImage && background.startsWith('gradient')
+    ? gradientBgClassMap[background as keyof typeof gradientBgClassMap] ||
+      gradientBgClassMap['gradient']
     : '',
   !backgroundImage && background === 'plain' ? 'cosy:bg-base-100' : '',
 ].join(' ');
@@ -330,7 +396,7 @@ const contentOrder = {
 
 <div
   class={containerClasses}
-  style={backgroundImage ? `background-image: url(${backgroundImage})` : ''}
+  style={backgroundImage ? `background-image: url(${backgroundImage})` : {}}
   ignore-heading>
   {
     backgroundImage && backgroundOverlay !== 'none' && (
@@ -354,9 +420,7 @@ const contentOrder = {
         (align === 'left' ? 'cosy:text-left cosy:items-start' : '') +
         (align === 'right' ? 'cosy:text-right cosy:items-end' : '')}>
       <h2 class={titleClasses}>{title}</h2>
-      <p class={descriptionClasses}>
-        {description}
-      </p>
+      <p class={descriptionClasses}>{description}</p>
 
       {
         Astro.slots.has('app') && (

package/dist/src-astro/icons/CodeIcon.astro

@@ -0,0 +1,22 @@
+---
+// @component CodeIcon
+// @description 代码相关的图标，用于表示代码块、开发等场景
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /** 图标的大小 @default "24px" */
+  size?: string;
+  /** 图标的颜色 @default "currentColor" */
+  color?: string;
+  /** 自定义类名 */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="code" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/index.ts

@@ -17,6 +17,8 @@ export { default as CheckCircle } from './CheckCircle.astro';
 export { default as CheckIcon } from './CheckIcon.astro';
 export { default as ClipboardIcon } from './ClipboardIcon.astro';
 export { default as CloseIcon } from './CloseIcon.astro';
+export { default as CodeIcon } from './CodeIcon.astro';
+export { default as DeleteIcon } from './DeleteIcon.astro';
 export { default as ErrorIcon } from './ErrorIcon.astro';
 export { default as GithubIcon } from './GithubIcon.astro';
 export { default as InfoCircle } from './InfoCircle.astro';
@@ -36,7 +38,6 @@ export { default as StarIcon } from './StarIcon.astro';
 export { default as HeartIcon } from './HeartIcon.astro';
 export { default as SaveIcon } from './SaveIcon.astro';
 export { default as EditIcon } from './EditIcon.astro';
-export { default as DeleteIcon } from './DeleteIcon.astro';
 export { default as ToolsIcon } from './ToolsIcon.astro';
 export { default as WalletIcon } from './WalletIcon.astro';
 export { default as ReportIcon } from './ReportIcon.astro';

package/dist/src-astro/language-switcher/LanguageSwitcher.astro

@@ -32,16 +32,20 @@ import '../../style.ts';
 
 interface Props {
   languages: string[];
+  /**
+   * 自定义类名
+   */
+  class?: string;
 }
 
-const { languages = ['zh-cn', 'en'] } = Astro.props;
+const { languages = ['zh-cn', 'en'], class: className = '' } = Astro.props;
 
 const currentLocale = Astro.currentLocale;
 const currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
 ---
 
 <!-- 语言切换按钮 -->
-<div class="cosy:dropdown cosy:dropdown-end">
+<div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
   <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
     <span class="cosy:mr-1">{currentLanguageName}</span>
     <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />

package/dist/src-astro/link/Link.astro

@@ -85,6 +85,21 @@ interface Props extends HTMLAttributes<'a'> {
   size?: LinkSize;
   debug?: boolean;
   centerText?: boolean;
+  btn?: boolean;
+  circle?: boolean;
+  ghost?: boolean;
+  noUnderline?: boolean;
+  rounded?: boolean;
+  fullWidth?: boolean;
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  align?: 'left' | 'center' | 'right';
 }
 
 const {
@@ -98,13 +113,21 @@ const {
   'class:list': classList,
   debug = false,
   centerText = false,
+  btn = false,
+  circle = false,
+  ghost = false,
+  noUnderline = true,
+  rounded = false,
+  fullWidth = false,
+  color,
+  align,
   ...rest
 } = Astro.props;
 
 // 构建类名
 const classes = [
   // 基础链接样式
-  'cosy:items-center cosy:cursor-pointer cosy:no-underline cosy:transition-all cosy:duration-200',
+  'cosy:items-center cosy:cursor-pointer cosy:transition-all cosy:duration-200',
 
   // 显示方式
   block ? 'cosy:flex cosy:w-full' : 'cosy:inline-flex',
@@ -113,7 +136,7 @@ const classes = [
   variant === 'primary' && 'cosy:text-primary cosy:hover:text-primary-focus',
   variant === 'secondary' &&
     'cosy:text-secondary cosy:hover:text-secondary-focus',
-  variant === 'text' && 'cosy:text-neutral cosy:hover:text-neutral-focus',
+  variant === 'text',
   variant === 'cta' &&
     'cosy:text-accent cosy:hover:text-accent-focus cosy:font-medium',
   variant === 'ghost' &&
@@ -136,11 +159,35 @@ const classes = [
   animation === 'hover-scale' &&
     'cosy:hover:scale-105 cosy:transition-transform',
 
+  // 新增：按钮风格
+  btn && 'cosy:btn',
+  btn && size === 'sm' && 'cosy:btn-sm',
+  btn && size === 'lg' && 'cosy:btn-lg',
+  btn && ghost && 'cosy:btn-ghost',
+  btn && color && `cosy:btn-${color}`,
+  btn && fullWidth && 'cosy:btn-block',
+  btn && circle && 'cosy:btn-circle',
+  btn && rounded && 'cosy:rounded-full',
+
+  // 非按钮风格下的圆角
+  !btn && rounded && 'cosy:rounded',
+
+  // 非按钮风格下的无下划线
+  !btn && noUnderline && 'cosy:no-underline cosy:hover:no-underline',
+
+  // 宽度100%
+  fullWidth && !btn && 'cosy:w-full',
+
+  // 对齐
+  align === 'center' && 'cosy:justify-center cosy:text-center',
+  align === 'right' && 'cosy:justify-end cosy:text-right',
+  align === 'left' && 'cosy:justify-start cosy:text-left',
+
   // 自定义类名
   className,
 ];
 
-// 文本居中样式
+// 文本居中样式（兼容旧用法）
 if (centerText) {
   classes.push('cosy:justify-center cosy:text-center');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.21",
+  "version": "0.8.22",
   "description": "An astro component library",
   "author": {
     "name": "nookery",

package/dist/src-astro/banner/BannerAllAnimations.astro

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