@coffic/cosy-ui 0.6.10 → 0.6.14

package/dist/components/layouts/BaseLayout.astro

@@ -49,7 +49,7 @@
  * ```
  */
 
-import '../../app.css';
+import '../../style.ts';
 import { LinkUtil, type IMetaProps } from '../../index';
 
 export interface Props extends IMetaProps {

package/dist/components/layouts/DashboardLayout.astro

@@ -37,7 +37,7 @@
  */
 
 import BaseLayout from './BaseLayout.astro';
-import '../../app.css';
+import '../../style.ts';
 
 export interface NavItem {
 	href: string;

package/dist/components/layouts/Footer.astro

@@ -146,12 +146,9 @@
  */
 
 import { processSocialLink } from '../../utils/social';
-import SocialIcon from '../icons/SocialIcon.astro';
-import type { IFooterProps } from '../../types/footer';
-import { createTextGetter } from '../../utils/i18n';
+import { SocialIcon, LanguageUtil, type IFooterProps, createTextGetter } from '../../index';
 import NavSection from './NavSection.astro';
-import { LanguageUtil } from '../../utils/language';
-import '../../app.css';
+import '../../style.ts';
 
 const {
 	siteName,

package/dist/components/layouts/Grid.astro

@@ -52,7 +52,7 @@
  */
 
 // 导入样式
-import '../../app.css';
+import '../../style.ts';
 
 import type { HTMLAttributes } from 'astro/types';
 

package/dist/components/layouts/Header.astro

@@ -57,7 +57,7 @@
  *   height="lg"
  * />
  */
-import '../../app.css';
+import '../../style.ts';
 import Link from '../base/Link.astro';
 import Image from '../base/Image.astro';
 import NavItems from './NavItems.astro';

package/dist/components/layouts/NavItems.astro

@@ -14,7 +14,7 @@
  * />
  * ```
  */
-import '../../app.css';
+import '../../style.ts';
 import Link from '../base/Link.astro';
 import type { INavItem } from '../../index';
 

package/dist/components/layouts/Sidebar.astro

@@ -21,11 +21,11 @@
  * ```
  */
 
-import '../../app.css';
+import '../../style.ts';
 import { isPathMatch } from '../../utils/path';
 import Modal from '../display/Modal.astro';
 import SidebarNav from './SidebarNav.astro';
-import MenuIcon from '../icons/MenuIcon.astro';
+import { MenuIcon } from '../../index';
 import type { ISidebarProps } from '../../index';
 
 export interface Props extends ISidebarProps {}

package/dist/components/layouts/SidebarNav.astro

@@ -6,7 +6,7 @@
  */
 
 import { isPathMatch } from '../../utils/path';
-import '../../app.css';
+import '../../style.ts';
 import type { ISidebarItem } from '../../types/sidebar';
 
 interface Props {

package/dist/components/layouts/Stack.astro

@@ -1,18 +1,18 @@
 ---
 /**
  * @component Stack
- * 
+ *
  * @description
  * Stack 组件是一个垂直堆叠布局组件，用于垂直排列元素并控制它们之间的间距。
  * 它提供了灵活的间距控制、对齐方式和分隔线选项，使垂直布局更加简单。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 简化布局 - 提供简单直观的方式创建垂直堆叠布局
  * 2. 一致性 - 通过预设的间距选项确保布局一致性
  * 3. 灵活性 - 支持多种对齐方式和分隔线选项
  * 4. 可组合性 - 可以与其他布局组件组合使用
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
@@ -22,7 +22,7 @@
  *   <div>第三个元素</div>
  * </Stack>
  * ```
- * 
+ *
  * 自定义间距：
  * ```astro
  * <Stack gap="lg">
@@ -30,7 +30,7 @@
  *   <div>垂直排列</div>
  * </Stack>
  * ```
- * 
+ *
  * 带分隔线：
  * ```astro
  * <Stack dividers={true} dividerColor="primary">
@@ -38,7 +38,7 @@
  *   <div>使用主题色</div>
  * </Stack>
  * ```
- * 
+ *
  * 自定义对齐：
  * ```astro
  * <Stack align="center">
@@ -49,7 +49,7 @@
  */
 
 // 导入样式
-import '../../app.css';
+import '../../style.ts';
 
 // 定义间距类型
 type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -61,89 +61,91 @@ type AlignType = 'start' | 'center' | 'end' | 'stretch';
 type DividerColor = 'gray' | 'light' | 'dark' | 'primary';
 
 interface Props {
-  /**
-   * 元素间距
-   * @default "md"
-   */
-  gap?: GapSize;
-  
-  /**
-   * 是否显示分隔线
-   * @default false
-   */
-  dividers?: boolean;
-  
-  /**
-   * 分隔线颜色
-   * @default "gray"
-   */
-  dividerColor?: DividerColor;
-  
-  /**
-   * 对齐方式
-   * @default "stretch"
-   */
-  align?: AlignType;
-  
-  /**
-   * 自定义类名
-   */
-  class?: string;
-  
-  /**
-   * 类名列表
-   */
-  'class:list'?: any;
-  
-  [key: string]: any;
+	/**
+	 * 元素间距
+	 * @default "md"
+	 */
+	gap?: GapSize;
+
+	/**
+	 * 是否显示分隔线
+	 * @default false
+	 */
+	dividers?: boolean;
+
+	/**
+	 * 分隔线颜色
+	 * @default "gray"
+	 */
+	dividerColor?: DividerColor;
+
+	/**
+	 * 对齐方式
+	 * @default "stretch"
+	 */
+	align?: AlignType;
+
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+
+	/**
+	 * 类名列表
+	 */
+	'class:list'?: any;
+
+	[key: string]: any;
 }
 
 const {
-  gap = 'md',
-  dividers = false,
-  dividerColor = 'gray',
-  align = 'stretch',
-  class: className = '',
-  'class:list': classList,
-  ...rest
+	gap = 'md',
+	dividers = false,
+	dividerColor = 'gray',
+	align = 'stretch',
+	class: className = '',
+	'class:list': classList,
+	...rest
 } = Astro.props;
 
 // 间距映射
 const gapClasses: Record<GapSize, string> = {
-  'none': 'stack-gap-none',
-  'xs': 'stack-gap-xs',
-  'sm': 'stack-gap-sm',
-  'md': 'stack-gap-md',
-  'lg': 'stack-gap-lg',
-  'xl': 'stack-gap-xl'
+	none: 'stack-gap-none',
+	xs: 'stack-gap-xs',
+	sm: 'stack-gap-sm',
+	md: 'stack-gap-md',
+	lg: 'stack-gap-lg',
+	xl: 'stack-gap-xl',
 };
 
 // 对齐方式映射
 const alignClasses: Record<AlignType, string> = {
-  'start': 'stack-align-start',
-  'center': 'stack-align-center',
-  'end': 'stack-align-end',
-  'stretch': 'stack-align-stretch'
+	start: 'stack-align-start',
+	center: 'stack-align-center',
+	end: 'stack-align-end',
+	stretch: 'stack-align-stretch',
 };
 
 // 分隔线颜色映射
 const dividerColorClasses: Record<DividerColor, string> = {
-  'gray': 'stack-divider-gray',
-  'light': 'stack-divider-light',
-  'dark': 'stack-divider-dark',
-  'primary': 'stack-divider-primary'
+	gray: 'stack-divider-gray',
+	light: 'stack-divider-light',
+	dark: 'stack-divider-dark',
+	primary: 'stack-divider-primary',
 };
 
 // 构建最终类名
 const stackClasses = [
-  'stack',
-  alignClasses[align as AlignType],
-  gapClasses[gap as GapSize],
-  dividers ? `stack-divider ${dividerColorClasses[dividerColor as DividerColor]}` : '',
-  className
-].filter(Boolean).join(' ');
+	'stack',
+	alignClasses[align as AlignType],
+	gapClasses[gap as GapSize],
+	dividers ? `stack-divider ${dividerColorClasses[dividerColor as DividerColor]}` : '',
+	className,
+]
+	.filter(Boolean)
+	.join(' ');
 ---
 
 <div class:list={[stackClasses, classList]} {...rest}>
-  <slot />
+	<slot />
 </div>

package/dist/components/navigation/LanguageSwitcher.astro

@@ -27,8 +27,8 @@
  * ```
  */
 
-import ChevronDownIcon from '../icons/ChevronDownIcon.astro';
-import '../../app.css';
+import { ChevronDownIcon } from '../../index';
+import '../../style.ts';
 import { LanguageUtil } from '../../utils/language';
 
 interface Props {

package/dist/components/navigation/TableOfContents.astro

@@ -53,7 +53,7 @@
  */
 
 // 导入样式
-import '../../app.css';
+import '../../style.ts';
 import { createTextGetter } from '../../utils/i18n';
 import { LanguageUtil } from '../../utils/language';
 

package/dist/components/navigation/ThemeSwitcher.astro

@@ -26,8 +26,8 @@
  */
 
 import Button from '../base/Button.astro';
-import SunCloudyIcon from '../icons/SunCloudyIcon.astro';
-import '../../app.css';
+import SunCloudyIcon from '../../icons/SunCloudyIcon.astro';
+import '../../style.ts';
 
 interface Props {
 	/**

package/dist/components/typography/Article.astro

@@ -104,8 +104,8 @@
  */
 
 // 导入样式
-import '../../app.css';
-import type { IArticleProps } from '@/types/article';
+import '../../style.ts';
+import type { IArticleProps } from '../../types/article';
 
 export interface Props extends IArticleProps {}
 

package/dist/components/typography/Heading.astro

@@ -63,8 +63,8 @@
  * - LinkIcon (用于锚点链接)
  */
 
-import LinkIcon from '../icons/LinkIcon.astro';
-import '../../app.css';
+import { LinkIcon } from '../../index';
+import '../../style.ts';
 
 interface Props {
 	level?: 1 | 2 | 3 | 4 | 5 | 6;

package/dist/components/typography/Text.astro

@@ -95,7 +95,7 @@
  * - 确保文本颜色与背景色的对比度符合WCAG标准
  */
 
-import '../../app.css';
+import '../../style.ts';
 
 export interface Props {
 	as?: string;

package/dist/icons/AlertTriangle.astro

@@ -0,0 +1,24 @@
+---
+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="alertTriangle" size={size} color={color} class={className} />

package/dist/icons/AstroIcon.astro

@@ -0,0 +1,46 @@
+---
+import { iconData } from '../assets/iconData';
+
+interface Props {
+	/**
+	 * 图标名称，必须在iconData中存在
+	 */
+	name: string;
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { name, size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+const icon = iconData[name];
+const viewBox = icon?.viewBox || '0 0 24 24';
+---
+
+{
+	icon && (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width={size}
+			height={size}
+			viewBox={viewBox}
+			fill="none"
+			stroke={color}
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class={className}>
+			<path d={icon.path} />
+		</svg>
+	)
+}

package/dist/icons/CalendarIcon.astro

@@ -0,0 +1,24 @@
+---
+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="calendar" size={size} color={color} class={className} />

package/dist/icons/CheckCircle.astro

@@ -0,0 +1,23 @@
+---
+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="checkCircle" size={size} color={color} class={className} />

package/dist/icons/CheckIcon.astro

@@ -0,0 +1,27 @@
+---
+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="check" size={size} color={color} class={className} />

package/dist/{components/icons → icons}/ChevronDownIcon.astro

@@ -1,4 +1,6 @@
 ---
+import AstroIcon from './AstroIcon.astro';
+
 interface Props {
 	/**
 	 * 图标的大小
@@ -19,16 +21,4 @@ interface Props {
 const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
 ---
 
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	viewBox="0 0 24 24"
-	fill="none"
-	stroke={color}
-	stroke-width="2"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	class={className}>
-	<path d="M19 9l-7 7-7-7"></path>
-</svg>
+<AstroIcon name="chevronDown" size={size} color={color} class={className} />

package/dist/icons/ClipboardIcon.astro

@@ -0,0 +1,27 @@
+---
+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="clipboard" size={size} color={color} class={className} />

package/dist/icons/CloseIcon.astro

@@ -0,0 +1,27 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 关闭图标组件
+ */
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "16px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '16px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="close" size={size} color={color} class={className} />

package/dist/icons/ErrorIcon.astro

@@ -0,0 +1,24 @@
+---
+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="error" size={size} color={color} class={className} />

package/dist/icons/GithubIcon.astro

@@ -0,0 +1,24 @@
+---
+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="github" size={size} color={color} class={className} />

package/dist/icons/InfoCircle.astro

@@ -0,0 +1,24 @@
+---
+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="infoCircle" size={size} color={color} class={className} />