@coffic/cosy-ui 0.1.28 → 0.2.0

package/package.json

@@ -1,60 +1,66 @@
 {
-  "name": "@coffic/cosy-ui",
-  "version": "0.1.28",
-  "description": "A astro component library",
-  "repository": {
-    "url": "https://github.com/CofficLab/cosy-ui"
-  },
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./index.ts",
-  "exports": {
-    ".": "./index.ts"
-  },
-  "files": [
-    "src",
-    "index.ts"
-  ],
-  "keywords": [
-    "astro-component"
-  ],
-  "scripts": {
-    "format": "prettier -w .",
-    "lint": "eslint . --ext .ts,.js,.astro src",
-    "dev": "astro dev --host 0.0.0.0 --root example",
-    "build": "astro build --root example",
-    "preview": "astro preview --root example"
-  },
-  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.0.14",
-    "@types/chai": "^5.2.0",
-    "@types/eslint": "^9.6.1",
-    "@types/mocha": "^10.0.10",
-    "@types/node": "^22.13.10",
-    "@typescript-eslint/parser": "^8.26.1",
-    "astro": "^5.5.2",
-    "chai": "^4.5.0",
-    "daisyui": "^5.0.3",
-    "eslint": "^8.57.1",
-    "eslint-plugin-astro": "^1.3.1",
-    "mocha": "^10.8.2",
-    "prettier": "^3.5.3",
-    "prettier-plugin-astro": "^0.14.1",
-    "sharp": "^0.33.2",
-    "tailwindcss": "^4.0.14",
-    "typescript": "^5.8.2"
-  },
-  "peerDependencies": {
-    "astro": "^5.0.0",
-    "daisyui": "^5.0.3"
-  },
-  "dependencies": {
-    "@astrojs/vue": "^5.0.7",
-    "@remixicon/vue": "^4.6.0",
-    "prismjs": "^1.29.0",
-    "vue": "^3.5.13"
-  }
-}
+	"name": "@coffic/cosy-ui",
+	"version": "0.2.0",
+	"description": "An astro component library",
+	"author": {
+		"name": "nookery",
+		"url": "https://github.com/nookery"
+	},
+	"license": "MIT",
+	"keywords": [
+		"astro-integration",
+		"astro-component",
+		"withastro",
+		"astro",
+		"cosy-ui"
+	],
+	"homepage": "https://github.con/CofficLab/cosy-ui",
+	"publishConfig": {
+		"access": "public"
+	},
+	"sideEffects": false,
+	"exports": {
+		".": "./dist/index.js"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"dev": "astro dev",
+		"build": "vite build && tsx scripts/post-build.ts"
+	},
+	"type": "module",
+	"peerDependencies": {
+		"astro": "^5.1.3"
+	},
+	"dependencies": {
+		"astro-integration-kit": "^0.18.0",
+		"fs-extra": "^11.3.0"
+	},
+	"devDependencies": {
+		"@astrojs/check": "^0.9.4",
+		"@astrojs/ts-plugin": "^1.10.4",
+		"@tailwindcss/vite": "^4.0.14",
+		"@types/chai": "^5.2.0",
+		"@types/eslint": "^9.6.1",
+		"@types/fs-extra": "^11.0.4",
+		"@types/mocha": "^10.0.10",
+		"@types/node": "^22.13.10",
+		"@types/react": "^19.0.10",
+		"@typescript-eslint/parser": "^8.26.1",
+		"astro": "^5.5.2",
+		"chai": "^4.5.0",
+		"daisyui": "^5.0.4",
+		"eslint": "^8.57.1",
+		"eslint-plugin-astro": "^1.3.1",
+		"mocha": "^10.8.2",
+		"prettier": "^3.5.3",
+		"prettier-plugin-astro": "^0.14.1",
+		"rollup-plugin-copy": "^3.5.0",
+		"sharp": "^0.33.2",
+		"tailwindcss": "^4.0.14",
+		"tsx": "^4.19.3",
+		"typescript": "^5.8.2",
+		"vite": "^6.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>