@coffic/cosy-ui 0.1.29 → 0.2.2

package/dist/components/typography/Heading.astro

@@ -0,0 +1,205 @@
+---
+/**
+ * @component Heading
+ * 
+ * @description
+ * Heading 组件用于创建各级标题，提供一致的排版样式和灵活的定制选项。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 层次清晰 - 通过不同级别的标题建立内容的视觉层次结构
+ * 2. 一致性 - 确保整个应用中标题样式的一致性
+ * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
+ * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容结构
+ * 
+ * 视觉特点：
+ * - 字体大小和粗细随级别变化
+ * - 可选的下划线或底部边框
+ * - 可定制的颜色和间距
+ * - 响应式设计，在不同屏幕尺寸下保持良好的可读性
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Heading level={1}>这是一个一级标题</Heading>
+ * <Heading level={2}>这是一个二级标题</Heading>
+ * <Heading level={3}>这是一个三级标题</Heading>
+ * ```
+ * 
+ * 自定义样式：
+ * ```astro
+ * <Heading level={2} color="primary" underline>带下划线的二级标题</Heading>
+ * ```
+ * 
+ * 带锚点链接：
+ * ```astro
+ * <Heading level={2} id="section-1" anchor>带锚点的标题</Heading>
+ * ```
+ * 
+ * 自定义间距：
+ * ```astro
+ * <Heading level={1} class="mb-8">自定义底部间距的标题</Heading>
+ * ```
+ * 
+ * @props
+ * @prop {1|2|3|4|5|6} [level=2] - 标题级别，对应 h1-h6 标签
+ * @prop {string} [id] - 标题的 ID，用于锚点链接
+ * @prop {boolean} [anchor=false] - 是否显示锚点链接图标
+ * @prop {boolean} [underline=false] - 是否显示下划线
+ * @prop {string} [align='left'] - 文本对齐方式：'left', 'center', 'right'
+ * @prop {'default'|'primary'|'secondary'|'accent'|'muted'} [color='default'] - 标题颜色
+ * @prop {string} [class] - 自定义 CSS 类名
+ * 
+ * @slots
+ * @slot default - 标题内容
+ * 
+ * @accessibility
+ * - 使用语义化的 h1-h6 标签
+ * - 锚点链接带有描述性 aria-label
+ * - 遵循标题层次结构的最佳实践
+ * 
+ * @dependencies
+ * 依赖于以下图标组件：
+ * - LinkIcon (用于锚点链接)
+ */
+
+import LinkIcon from '../icons/LinkIcon.astro';
+
+interface Props {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  id?: string;
+  anchor?: boolean;
+  underline?: boolean;
+  align?: 'left' | 'center' | 'right';
+  color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
+  class?: string;
+}
+
+const {
+  level = 2,
+  id,
+  anchor = false,
+  underline = false,
+  align = 'left',
+  color = 'default',
+  class: className = '',
+} = Astro.props;
+
+// 根据级别和颜色设置样式
+const headingClass = {
+  1: 'text-4xl font-bold',
+  2: 'text-3xl font-semibold',
+  3: 'text-2xl font-semibold',
+  4: 'text-xl font-medium',
+  5: 'text-lg font-medium',
+  6: 'text-base font-medium',
+}[(level ?? 2) as 1|2|3|4|5|6];
+
+const colorClass = {
+  default: 'text-gray-900 dark:text-gray-100',
+  primary: 'text-primary-600 dark:text-primary-400',
+  secondary: 'text-secondary-600 dark:text-secondary-400',
+  accent: 'text-accent-600 dark:text-accent-400',
+  muted: 'text-gray-600 dark:text-gray-400',
+}[(color ?? 'default') as 'default'|'primary'|'secondary'|'accent'|'muted'];
+
+const alignClass = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+}[(align ?? 'left') as 'left'|'center'|'right'];
+
+const underlineClass = underline ? 'border-b pb-2 border-gray-200 dark:border-gray-700' : '';
+
+// 组合所有类名
+const combinedClass = `heading ${headingClass} ${colorClass} ${alignClass} ${underlineClass} ${className}`;
+---
+
+{level === 1 && (
+  <h1 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h1>
+)}
+
+{level === 2 && (
+  <h2 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h2>
+)}
+
+{level === 3 && (
+  <h3 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h3>
+)}
+
+{level === 4 && (
+  <h4 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h4>
+)}
+
+{level === 5 && (
+  <h5 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h5>
+)}
+
+{level === 6 && (
+  <h6 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h6>
+)}
+
+<style>
+  .heading {
+    margin-bottom: 0.5em;
+    line-height: 1.2;
+    scroll-margin-top: 100px;
+  }
+  
+  .heading-anchor {
+    color: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+  }
+  
+  /* 悬停效果 */
+  .heading:hover .heading-anchor {
+    opacity: 0.7 !important;
+  }
+  
+  .heading-anchor:hover {
+    opacity: 1 !important;
+  }
+</style> 

package/dist/components/typography/Text.astro

@@ -0,0 +1,187 @@
+---
+/**
+ * @component Text
+ * 
+ * @description
+ * Text 组件用于创建各种文本元素，提供一致的排版样式和灵活的定制选项。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 一致性 - 确保整个应用中文本样式的一致性
+ * 2. 可读性 - 优化文本的可读性和舒适度
+ * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
+ * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容
+ * 
+ * 视觉特点：
+ * - 不同的字体大小和行高
+ * - 可选的字体粗细和样式
+ * - 可定制的颜色和对齐方式
+ * - 支持截断和省略号
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Text>这是一段普通文本</Text>
+ * ```
+ * 
+ * 不同大小：
+ * ```astro
+ * <Text size="xs">超小文本</Text>
+ * <Text size="sm">小文本</Text>
+ * <Text size="md">中等文本</Text>
+ * <Text size="lg">大文本</Text>
+ * <Text size="xl">超大文本</Text>
+ * ```
+ * 
+ * 不同颜色：
+ * ```astro
+ * <Text color="primary">主要颜色文本</Text>
+ * <Text color="secondary">次要颜色文本</Text>
+ * <Text color="accent">强调色文本</Text>
+ * <Text color="muted">柔和色文本</Text>
+ * ```
+ * 
+ * 字体粗细：
+ * ```astro
+ * <Text weight="light">细体文本</Text>
+ * <Text weight="normal">常规文本</Text>
+ * <Text weight="medium">中等粗文本</Text>
+ * <Text weight="semibold">半粗体文本</Text>
+ * <Text weight="bold">粗体文本</Text>
+ * ```
+ * 
+ * 文本对齐：
+ * ```astro
+ * <Text align="left">左对齐文本</Text>
+ * <Text align="center">居中对齐文本</Text>
+ * <Text align="right">右对齐文本</Text>
+ * <Text align="justify">两端对齐文本</Text>
+ * ```
+ * 
+ * 文本截断：
+ * ```astro
+ * <Text truncate>这是一段很长的文本，将会被截断并显示省略号...</Text>
+ * ```
+ * 
+ * 组合使用：
+ * ```astro
+ * <Text 
+ *   size="lg" 
+ *   color="primary" 
+ *   weight="bold" 
+ *   align="center"
+ *   class="my-4"
+ * >
+ *   这是一段重要的提示文本
+ * </Text>
+ * ```
+ * 
+ * @props
+ * @prop {string} [as='p'] - 要渲染的HTML元素，如 'p', 'span', 'div' 等
+ * @prop {'xs'|'sm'|'md'|'lg'|'xl'} [size='md'] - 文本大小
+ * @prop {'light'|'normal'|'medium'|'semibold'|'bold'} [weight='normal'] - 字体粗细
+ * @prop {'default'|'primary'|'secondary'|'accent'|'muted'} [color='default'] - 文本颜色
+ * @prop {'left'|'center'|'right'|'justify'} [align='left'] - 文本对齐方式
+ * @prop {boolean} [italic=false] - 是否使用斜体
+ * @prop {boolean} [underline=false] - 是否添加下划线
+ * @prop {boolean} [truncate=false] - 是否截断文本并显示省略号
+ * @prop {string} [class] - 自定义 CSS 类名
+ * 
+ * @slots
+ * @slot default - 文本内容
+ * 
+ * @accessibility
+ * - 使用语义化的HTML元素
+ * - 确保文本颜色与背景色的对比度符合WCAG标准
+ */
+
+interface Props {
+  as?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
+  align?: 'left' | 'center' | 'right' | 'justify';
+  italic?: boolean;
+  underline?: boolean;
+  truncate?: boolean;
+  class?: string;
+}
+
+const {
+  as: Element = 'p',
+  size = 'md',
+  weight = 'normal',
+  color = 'default',
+  align = 'left',
+  italic = false,
+  underline = false,
+  truncate = false,
+  class: className = '',
+} = Astro.props;
+
+// 根据大小设置样式
+const sizeClasses = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+};
+const sizeClass = sizeClasses[size as keyof typeof sizeClasses];
+
+// 根据粗细设置样式
+const weightClasses = {
+  light: 'font-light',
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+};
+const weightClass = weightClasses[weight as keyof typeof weightClasses];
+
+// 根据颜色设置样式
+const colorClasses = {
+  default: 'text-gray-900 dark:text-gray-100',
+  primary: 'text-primary-600 dark:text-primary-400',
+  secondary: 'text-secondary-600 dark:text-secondary-400',
+  accent: 'text-accent-600 dark:text-accent-400',
+  muted: 'text-gray-600 dark:text-gray-400',
+};
+const colorClass = colorClasses[color as keyof typeof colorClasses];
+
+// 根据对齐方式设置样式
+const alignClasses = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+  justify: 'text-justify',
+};
+const alignClass = alignClasses[align as keyof typeof alignClasses];
+
+// 其他样式
+const italicClass = italic ? 'italic' : '';
+const underlineClass = underline ? 'underline' : '';
+const truncateClass = truncate ? 'truncate' : '';
+
+// 组合所有类名
+const combinedClass = `text ${sizeClass} ${weightClass} ${colorClass} ${alignClass} ${italicClass} ${underlineClass} ${truncateClass} ${className}`;
+---
+
+<Element class={combinedClass}>
+  <slot />
+</Element>
+
+<style>
+  .text {
+    margin-bottom: 1em;
+    line-height: 1.5;
+  }
+  
+  /* 确保截断文本正常工作 */
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+</style> 

package/dist/index.ts

@@ -0,0 +1,70 @@
+// Base
+export { default as Button } from './components/base/Button.astro';
+export { default as Link } from './components/base/Link.astro';
+export { default as Image } from './components/base/Image.astro';
+export { default as ThemeItem } from './components/base/ThemeItem.astro';
+export { default as Alert } from './components/base/Alert.astro';
+
+// Navigation
+export { default as ThemeSwitcher } from './components/navigation/ThemeSwitcher.astro';
+export { default as TableOfContents } from './components/navigation/TableOfContents.astro';
+export { default as LanguageSwitcher } from './components/navigation/LanguageSwitcher.astro';
+
+// Display
+export { default as CodeBlock } from './components/display/CodeBlock.astro';
+export { default as Modal } from './components/display/Modal.astro';
+export { default as Hero } from './components/display/Hero.astro';
+export { default as Banner } from './components/display/Banner.astro';
+export { default as Card } from './components/display/Card.astro';
+export { default as CodeExample } from './components/display/CodeExample.astro';
+
+// Data Display
+export { default as TeamMembers } from './components/data-display/TeamMembers.astro';
+export { default as TeamMember } from './components/data-display/TeamMember.astro';
+export { default as Blog } from './components/data-display/Blog.astro';
+
+// Layouts
+export { default as Footer } from './components/layouts/Footer.astro';
+export { default as Header } from './components/layouts/Header.astro';
+export { default as DocumentationLayout } from './components/layouts/DocumentationLayout.astro';
+export { default as DefaultLayout } from './components/layouts/DefaultLayout.astro';
+export { default as Stack } from './components/layouts/Stack.astro';
+export { default as Grid } from './components/layouts/Grid.astro';
+export { default as BaseLayout } from './components/layouts/BaseLayout.astro';
+export { default as LandingLayout } from './components/layouts/LandingLayout.astro';
+export { default as DashboardLayout } from './components/layouts/DashboardLayout.astro';
+export { default as Flex } from './components/layouts/Flex.astro';
+
+// Typography
+export { default as Article } from './components/typography/Article.astro';
+export { default as Text } from './components/typography/Text.astro';
+export { default as Heading } from './components/typography/Heading.astro';
+
+// Icons
+export { default as SocialIcon } from './components/icons/SocialIcon.astro';
+export { default as TwitterIcon } from './components/icons/TwitterIcon.astro';
+export { default as UserIcon } from './components/icons/UserIcon.astro';
+export { default as WarningIcon } from './components/icons/WarningIcon.astro';
+export { default as XCircle } from './components/icons/XCircle.astro';
+export { default as InfoIcon } from './components/icons/InfoIcon.astro';
+export { default as LinkIcon } from './components/icons/LinkIcon.astro';
+export { default as LinkedinIcon } from './components/icons/LinkedinIcon.astro';
+export { default as MenuIcon } from './components/icons/MenuIcon.astro';
+export { default as SearchIcon } from './components/icons/SearchIcon.astro';
+export { default as SuccessIcon } from './components/icons/SuccessIcon.astro';
+export { default as SunCloudyIcon } from './components/icons/SunCloudyIcon.astro';
+export { default as AlertTriangle } from './components/icons/AlertTriangle.astro';
+export { default as CalendarIcon } from './components/icons/CalendarIcon.astro';
+export { default as CheckCircle } from './components/icons/CheckCircle.astro';
+export { default as CheckIcon } from './components/icons/CheckIcon.astro';
+export { default as ClipboardIcon } from './components/icons/ClipboardIcon.astro';
+export { default as CloseIcon } from './components/icons/CloseIcon.astro';
+export { default as ErrorIcon } from './components/icons/ErrorIcon.astro';
+export { default as GithubIcon } from './components/icons/GithubIcon.astro';
+export { default as InfoCircle } from './components/icons/InfoCircle.astro';
+
+// Containers
+export { default as Container } from './components/containers/Container.astro';
+export { default as Main } from './components/containers/Main.astro';
+export { default as Section } from './components/containers/Section.astro';
+

package/dist/integration.ts

@@ -0,0 +1,14 @@
+import { defineIntegration } from "astro-integration-kit";
+
+export const integration = defineIntegration({
+	name: "astro-cosy",
+	setup() {
+		return {
+			hooks: {
+				"astro:config:setup": ({ logger }) => {
+					logger.info("astro-cosy integration setup");
+				},
+			},
+		};
+	},
+});

package/dist/style.ts

@@ -0,0 +1 @@
+import './app.css'; 

package/{src → dist}/types/footer.ts

@@ -16,6 +16,7 @@ export interface FooterProps {
     company: string;
     copyright: string;
     inspirationalSlogan: string;
+    debug?: boolean;
     icp?: string;
     logo?: Logo;
     products?: Product[];

package/dist/utils/theme.ts

@@ -0,0 +1,55 @@
+interface ThemeManager {
+    updateActiveTheme: (currentTheme: string) => void;
+    handleThemeClick: (this: HTMLElement) => void;
+    initialize: () => void;
+    setTheme: (theme: string) => void;
+}
+
+export function createThemeManager(): ThemeManager {
+    const getThemeItems = () => document.querySelectorAll<HTMLElement>('[data-set-theme]');
+
+    const updateActiveTheme = (currentTheme: string) => {
+        const themeItems = getThemeItems();
+        themeItems.forEach((item) => {
+            const themeId = item.getAttribute('data-set-theme');
+            const isActive = themeId === currentTheme;
+            item.classList.toggle('bg-primary', isActive);
+            item.classList.toggle('text-primary-content', isActive);
+        });
+    };
+
+    function handleThemeClick(this: HTMLElement) {
+        const theme = this.getAttribute('data-set-theme');
+        document.documentElement.setAttribute('data-theme', theme ?? 'default');
+        localStorage.setItem('theme', theme ?? 'default');
+        updateActiveTheme(theme ?? 'default');
+    }
+
+    const setTheme = (theme: string) => {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        updateActiveTheme(theme);
+    };
+
+    const initialize = () => {
+        const themeItems = getThemeItems();
+
+        // 移除旧的事件监听器并添加新的
+        themeItems.forEach((item) => {
+            item.removeEventListener('click', handleThemeClick);
+            item.addEventListener('click', handleThemeClick);
+        });
+
+        // 从本地存储中获取主题并更新激活状态
+        const savedTheme = localStorage.getItem('theme') || 'default';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        updateActiveTheme(savedTheme);
+    };
+
+    return {
+        updateActiveTheme,
+        handleThemeClick,
+        initialize,
+        setTheme,
+    };
+} 

package/package.json

@@ -1,60 +1,68 @@
 {
-  "name": "@coffic/cosy-ui",
-  "version": "0.1.29",
-  "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.2",
+	"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,
+	"main": "./dist/index.js",
+	"exports": {
+		".": "./dist/index.js"
+	},
+	"files": [
+		"dist",
+		"index.ts"
+	],
+	"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"
+	}
+}