@coffic/cosy-ui 0.1.29 → 0.2.2

package/index.ts

@@ -1,18 +0,0 @@
-// 这里用于导出所有组件，注意按照字母排序
-export { default as Alert } from './src/components/Alert.astro';
-export { default as Article } from './src/components/Article.astro';
-export { default as Blog } from './src/components/Blog.astro';
-export { default as Banner } from './src/components/Banner.astro';
-export { default as Button } from './src/components/Button.astro';
-export { default as Card } from './src/components/Card.astro';
-export { default as CodeBlock } from './src/components/CodeBlock.astro';
-export { default as Footer } from './src/components/Footer.astro';
-export { default as Header } from './src/components/Header.astro';
-export { default as Hero } from './src/components/Hero.astro';
-export { default as Image } from './src/components/Image.astro';
-export { default as Link } from './src/components/Link.astro';
-export { default as Modal } from './src/components/Modal.astro';
-export { default as SocialIcon } from './src/components/SocialIcon.astro';
-export { default as ThemeItem } from './src/components/ThemeItem.astro';
-export { default as TeamMember } from './src/components/TeamMember.astro';
-export { default as TeamMembers } from './src/components/TeamMembers.astro';

package/src/components/Alert.astro

@@ -1,78 +0,0 @@
----
-interface Props {
-  type?: 'info' | 'success' | 'warning' | 'error';
-  title?: string;
-  closeable?: boolean;
-  class?: string;
-}
-
-const {
-  type = 'info',
-  title,
-  closeable = false,
-  class: className = '',
-} = Astro.props;
-
-// 根据类型设置样式
-const alertClass = {
-  info: 'alert-info',
-  success: 'alert-success',
-  warning: 'alert-warning',
-  error: 'alert-error',
-}[type];
-
-// 根据类型设置图标
-const icons = {
-  info: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 stroke-current">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-  </svg>`,
-  success: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-current" fill="none" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>`,
-  warning: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-current" fill="none" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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" />
-  </svg>`,
-  error: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-current" fill="none" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>`,
-};
----
-
-<div class={`alert ${alertClass} ${className}`} role="alert">
-  <div class="flex items-center gap-2">
-    <div set:html={icons[type]} />
-    <div class="flex-1">
-      {title && <h3 class="font-bold">{title}</h3>}
-      <div><slot /></div>
-    </div>
-    {closeable && (
-      <button class="btn btn-ghost btn-sm btn-circle close-alert">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
-    )}
-  </div>
-</div>
-
-{closeable && (
-  <script>
-    function initializeCloseButtons() {
-      const closeButtons = document.querySelectorAll('.close-alert');
-      closeButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const alert = button.closest('.alert');
-          if (alert) {
-            alert.remove();
-          }
-        });
-      });
-    }
-
-    // 初始化关闭按钮
-    initializeCloseButtons();
-
-    // Astro 页面切换时重新初始化
-    document.addEventListener('astro:page-load', initializeCloseButtons);
-  </script>
-)} 

package/src/components/Article.astro

@@ -1,11 +0,0 @@
----
-interface Props {
-    class?: string;
-}
-
-const { class: className = '' } = Astro.props;
----
-
-<article class:list={['prose prose-slate dark:prose-invert max-w-none', className]}>
-    <slot />
-</article>

package/src/components/Banner.astro

@@ -1,49 +0,0 @@
-<div class="w-full max-w-7xl px-4 sm:px-8 z-50 mx-auto">
-	<div
-		class="mt-0 hero p-4 rounded-2xl bg-base-300/50 dark:bg-base-200/50 backdrop-blur-xl
-		hover:shadow-2xl transform duration-300 ease-in-out
-		hover:scale-[1.02] hover:bg-base-300/70 dark:hover:bg-base-200/70
-		motion-safe:animate-fadeIn"
-	>
-		<div class="text-center hero-content">
-			<div class="w-full max-w-prose flex flex-row justify-center items-center mx-auto">
-				<p
-					class="text-xl sm:text-2xl md:text-3xl font-bold text-base-content
-					motion-safe:animate-slideUp"
-				>
-					<slot />
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
-
-<style>
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	@keyframes slideUp {
-		from {
-			opacity: 0;
-			transform: translateY(1rem);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.animate-fadeIn {
-		animation: fadeIn 0.5s ease-out;
-	}
-
-	.animate-slideUp {
-		animation: slideUp 0.5s ease-out;
-	}
-</style>

package/src/components/Blog.astro

@@ -1,115 +0,0 @@
----
-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="mb-8">
-    {cover && (
-      <div class="relative w-full h-[300px] md:h-[400px] mb-6 rounded-lg overflow-hidden">
-        <img
-          src={cover.src}
-          alt={cover.alt || title}
-          class="w-full h-full object-cover"
-        />
-      </div>
-    )}
-    
-    <div class="space-y-4">
-      <h1 class="text-4xl md:text-5xl font-bold tracking-tight">{title}</h1>
-      {subtitle && (
-        <p class="text-xl text-base-content/70">{subtitle}</p>
-      )}
-      
-      <div class="flex flex-wrap items-center gap-4 text-sm text-base-content/60">
-        {author && (
-          <div class="flex items-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-            </svg>
-            <span>{author}</span>
-          </div>
-        )}
-        
-        {date && (
-          <div class="flex items-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-              <line x1="16" y1="2" x2="16" y2="6"></line>
-              <line x1="8" y1="2" x2="8" y2="6"></line>
-              <line x1="3" y1="10" x2="21" y2="10"></line>
-            </svg>
-            <time datetime={date.toISOString()}>{formatDate(date)}</time>
-          </div>
-        )}
-      </div>
-
-      {tags.length > 0 && (
-        <div class="flex flex-wrap gap-2">
-          {tags.map(tag => (
-            <span class="badge badge-outline">{tag}</span>
-          ))}
-        </div>
-      )}
-    </div>
-  </header>
-
-  {/* 文章内容 */}
-  <div class="prose prose-lg max-w-none">
-    <slot />
-  </div>
-</article>
-
-<style>
-  /* 自定义文章样式 */
-  .article {
-    container-type: inline-size;
-  }
-
-  /* 优化大屏幕阅读体验 */
-  @container (min-width: 768px) {
-    .article {
-      font-size: 1.125rem;
-      line-height: 1.75;
-    }
-  }
-
-  /* 暗色主题适配 */
-  :global([data-theme="dark"]) .article {
-    --tw-prose-body: hsl(var(--bc));
-    --tw-prose-headings: hsl(var(--bc));
-    --tw-prose-links: hsl(var(--p));
-    --tw-prose-bold: hsl(var(--bc));
-    --tw-prose-quotes: hsl(var(--bc));
-    --tw-prose-code: hsl(var(--bc));
-  }
-</style> 

package/src/components/Button.astro

@@ -1,49 +0,0 @@
----
-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;
-}
-
-const {
-  variant,
-  size,
-  shape,
-  wide = false,
-  block = false,
-  loading = false,
-  disabled = false,
-  type = 'button',
-  class: className,
-  onClick,
-} = Astro.props;
-
-const classes = [
-  'btn',
-  variant && `btn-${variant}`,
-  size && `btn-${size}`,
-  shape && `btn-${shape}`,
-  wide && 'btn-wide',
-  block && 'btn-block',
-  loading && 'loading',
-  className,
-].filter(Boolean).join(' ');
----
-
-<button
-  type={type}
-  class={classes}
-  disabled={disabled}
-  onclick={onClick}
->
-  <slot name="icon-left" />
-  <slot />
-  <slot name="icon-right" />
-</button> 

package/src/components/Card.astro

@@ -1,113 +0,0 @@
----
-interface Props {
-    title?: string;
-    subtitle?: string;
-    imageUrl?: string;
-    href?: string;
-}
-
-const { title, subtitle, imageUrl, href } = Astro.props;
----
-
-<div class="group perspective-1000">
-    <div class:list={[
-        "card w-full bg-base-100/60 dark:bg-base-300/60 backdrop-blur-lg",
-        "transform transition-all duration-300 ease-out",
-        "hover:shadow-2xl hover:scale-[1.02]",
-        "active:scale-[0.98]",
-        "motion-safe:animate-fadeIn",
-        href && "cursor-pointer"
-    ]}>
-        {href ? (
-            <a href={href} class="card-body group-hover:translate-y-[-2px] transition-transform duration-300">
-                {imageUrl && (
-                    <figure class="relative overflow-hidden rounded-t-2xl">
-                        <img
-                            src={imageUrl}
-                            alt={title}
-                            class="w-full h-48 object-cover transform transition-transform duration-300 group-hover:scale-105"
-                        />
-                    </figure>
-                )}
-                {title && (
-                    <h2 class="card-title text-xl font-bold tracking-tight text-base-content">
-                        {title}
-                    </h2>
-                )}
-                {subtitle && (
-                    <p class="text-base-content/80">
-                        {subtitle}
-                    </p>
-                )}
-                <slot />
-            </a>
-        ) : (
-            <div class="card-body">
-                {imageUrl && (
-                    <figure class="relative overflow-hidden rounded-t-2xl">
-                        <img
-                            src={imageUrl}
-                            alt={title}
-                            class="w-full h-48 object-cover transform transition-transform duration-300 group-hover:scale-105"
-                        />
-                    </figure>
-                )}
-                {title && (
-                    <h2 class="card-title text-xl font-bold tracking-tight text-base-content">
-                        {title}
-                    </h2>
-                )}
-                {subtitle && (
-                    <p class="text-base-content/80">
-                        {subtitle}
-                    </p>
-                )}
-                <slot />
-            </div>
-        )}
-    </div>
-</div>
-
-<style>
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-            transform: translateY(10px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    .animate-fadeIn {
-        animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .perspective-1000 {
-        perspective: 1000px;
-    }
-
-    .card {
-        position: relative;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .card::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        background: radial-gradient(
-            circle at 50% 0%,
-            rgba(255, 255, 255, 0.1),
-            transparent 70%
-        );
-        opacity: 0;
-        transition: opacity 0.3s ease;
-    }
-
-    .card:hover::before {
-        opacity: 1;
-    }
-</style> 

package/src/components/CodeBlock.astro

@@ -1,186 +0,0 @@
----
-interface Props {
-  code: string;
-  lang?: string;
-  title?: string;
-  showLineNumbers?: boolean;
-}
-
-const {
-  code,
-  lang = 'plaintext',
-  title,
-  showLineNumbers = true,
-} = Astro.props;
-
-// 移除代码字符串开头和结尾的空行
-const trimmedCode = code.trim();
-
-// 生成行号
-const lines = trimmedCode.split('\n');
-const lineNumbers = Array.from({ length: lines.length }, (_, i) => i + 1);
----
-
-<div class="code-block not-prose rounded-lg border border-base-300 bg-base-200 my-4">
-  {/* 标题栏 */}
-  {title && (
-    <div class="flex items-center justify-between px-4 py-2 border-b border-base-300">
-      <span class="text-sm font-medium">{title}</span>
-      <button
-        class="copy-button btn btn-ghost btn-xs gap-1"
-        data-code={trimmedCode}
-        title="复制代码"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-        </svg>
-        <span class="copy-text">复制</span>
-      </button>
-    </div>
-  )}
-
-  {/* 代码区域 */}
-  <div class="relative">
-    {/* 行号 */}
-    {showLineNumbers && (
-      <div class="hidden md:block absolute left-0 top-0 bottom-0 px-4 py-4 select-none text-base-content/50 bg-base-300 border-r border-base-300">
-        {lineNumbers.map(num => (
-          <div class="text-right leading-6 text-sm">{num}</div>
-        ))}
-      </div>
-    )}
-
-    {/* 代码内容 */}
-    <pre class={`language-${lang} ${showLineNumbers ? 'pl-[3.5rem]' : 'px-4'} py-4 m-0 overflow-x-auto`}><code class={`language-${lang}`} set:html={trimmedCode} /></pre>
-  </div>
-</div>
-
-<script>
-  function initializeCopyButtons() {
-    const copyButtons = document.querySelectorAll('.copy-button');
-    
-    copyButtons.forEach(button => {
-      button.addEventListener('click', async () => {
-        const code = button.getAttribute('data-code') || '';
-        const copyText = button.querySelector('.copy-text');
-        
-        try {
-          await navigator.clipboard.writeText(code);
-          if (copyText) {
-            copyText.textContent = '已复制！';
-            setTimeout(() => {
-              copyText.textContent = '复制';
-            }, 2000);
-          }
-        } catch (err) {
-          console.error('复制失败:', err);
-          if (copyText) {
-            copyText.textContent = '复制失败';
-            setTimeout(() => {
-              copyText.textContent = '复制';
-            }, 2000);
-          }
-        }
-      });
-    });
-  }
-
-  // 在页面加载时初始化
-  initializeCopyButtons();
-
-  // 在 Astro 页面切换时重新初始化
-  document.addEventListener('astro:page-load', initializeCopyButtons);
-</script>
-
-<style is:global>
-  /* Prism.js 暗色主题自定义 */
-  .code-block pre {
-    background: transparent !important;
-  }
-  
-  .code-block code {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-  }
-
-  /* 代码高亮颜色 */
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #636f88;
-  }
-
-  .token.punctuation {
-    color: #81a1c1;
-  }
-
-  .namespace {
-    opacity: 0.7;
-  }
-
-  .token.property,
-  .token.tag,
-  .token.constant,
-  .token.symbol,
-  .token.deleted {
-    color: #81a1c1;
-  }
-
-  .token.number {
-    color: #b48ead;
-  }
-
-  .token.boolean {
-    color: #81a1c1;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: #a3be8c;
-  }
-
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .style .token.string,
-  .token.variable {
-    color: #81a1c1;
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.function,
-  .token.class-name {
-    color: #88c0d0;
-  }
-
-  .token.keyword {
-    color: #81a1c1;
-  }
-
-  .token.regex,
-  .token.important {
-    color: #ebcb8b;
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-</style>