@coffic/cosy-ui 0.6.10 → 0.6.14

package/dist/components/base/Button.astro

@@ -1,44 +1,44 @@
 ---
 /**
  * @component Button
- * 
+ *
  * @description
  * Button 组件用于触发一个即时操作，如表单提交、打开对话框等。
  * 支持多种样式变体、尺寸和状态，可以满足不同场景的需求。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 直观易用 - 通过视觉差异清晰传达按钮的重要性和功能
  * 2. 响应式交互 - 提供丰富的状态反馈，增强用户体验
  * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
  * 4. 无障碍性 - 确保所有用户都能获得良好体验
- * 
+ *
  * 视觉特点：
  * - 悬停效果：轻微上浮和阴影增强
  * - 点击效果：轻微下沉
  * - 加载状态：显示加载动画
  * - 多种颜色变体：适应不同场景和语义
  * - 多种尺寸：适应不同布局需求
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
  * <Button>默认按钮</Button>
  * <Button variant="primary">主要按钮</Button>
  * ```
- * 
+ *
  * 不同尺寸：
  * ```astro
  * <Button size="sm">小型按钮</Button>
  * <Button size="lg">大型按钮</Button>
  * ```
- * 
+ *
  * 状态变化：
  * ```astro
  * <Button disabled>禁用按钮</Button>
  * <Button loading>加载中</Button>
  * ```
- * 
+ *
  * 带图标：
  * ```astro
  * <Button>
@@ -49,103 +49,114 @@
  */
 
 // 导入样式
-import '../../app.css';
+import '../../style.ts';
 
 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;
-  formmethod?: string;
+	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;
+	formmethod?: string;
 }
 
 const {
-  variant = 'primary',
-  size = 'md',
-  shape,
-  wide = false,
-  block = false,
-  loading = false,
-  disabled = false,
-  type = 'button',
-  class: className,
-  onClick,
-  formmethod,
+	variant = 'primary',
+	size = 'md',
+	shape,
+	wide = false,
+	block = false,
+	loading = false,
+	disabled = false,
+	type = 'button',
+	class: className,
+	onClick,
+	formmethod,
 } = Astro.props;
 
 // 计算按钮的类名
 const getButtonClasses = () => {
-  const classes = ['cosy:btn'];
-  
-  // Variant classes
-  const variantClasses = {
-    primary: 'cosy:btn-primary',
-    secondary: 'cosy:btn-secondary',
-    accent: 'cosy:btn-accent',
-    info: 'cosy:btn-info',
-    success: 'cosy:btn-success',
-    warning: 'cosy:btn-warning',
-    error: 'cosy:btn-error',
-    ghost: 'cosy:btn-ghost',
-    link: 'cosy:btn-link',
-    outline: 'cosy:btn-outline',
-    neutral: 'cosy:btn-neutral'
-  };
-  
-  // Size classes
-  const sizeClasses = {
-    lg: 'cosy:btn-lg',
-    md: 'cosy:btn-md',
-    sm: 'cosy:btn-sm',
-    xs: 'cosy:btn-xs'
-  };
-  
-  // Shape classes
-  const shapeClasses = {
-    circle: 'cosy:btn-circle',
-    square: 'cosy:btn-square'
-  };
+	const classes = ['cosy:btn'];
 
-  if (variantClasses[variant]) {
-    classes.push(variantClasses[variant]);
-  }
-  
-  if (sizeClasses[size]) {
-    classes.push(sizeClasses[size]);
-  }
-  
-  if (shape && shapeClasses[shape]) {
-    classes.push(shapeClasses[shape]);
-  }
-  
-  if (wide) classes.push('cosy:btn-wide');
-  if (block) classes.push('cosy:btn-block');
-  if (loading) classes.push('cosy:loading');
-  if (className) classes.push(className);
-  
-  return classes;
+	// Variant classes
+	const variantClasses = {
+		primary: 'cosy:btn-primary',
+		secondary: 'cosy:btn-secondary',
+		accent: 'cosy:btn-accent',
+		info: 'cosy:btn-info',
+		success: 'cosy:btn-success',
+		warning: 'cosy:btn-warning',
+		error: 'cosy:btn-error',
+		ghost: 'cosy:btn-ghost',
+		link: 'cosy:btn-link',
+		outline: 'cosy:btn-outline',
+		neutral: 'cosy:btn-neutral',
+	};
+
+	// Size classes
+	const sizeClasses = {
+		lg: 'cosy:btn-lg',
+		md: 'cosy:btn-md',
+		sm: 'cosy:btn-sm',
+		xs: 'cosy:btn-xs',
+	};
+
+	// Shape classes
+	const shapeClasses = {
+		circle: 'cosy:btn-circle',
+		square: 'cosy:btn-square',
+	};
+
+	if (variantClasses[variant]) {
+		classes.push(variantClasses[variant]);
+	}
+
+	if (sizeClasses[size]) {
+		classes.push(sizeClasses[size]);
+	}
+
+	if (shape && shapeClasses[shape]) {
+		classes.push(shapeClasses[shape]);
+	}
+
+	if (wide) classes.push('cosy:btn-wide');
+	if (block) classes.push('cosy:btn-block');
+	if (loading) classes.push('cosy:loading');
+	if (className) classes.push(className);
+
+	return classes;
 };
 
 const buttonClasses = getButtonClasses();
 ---
 
 <button
-  type={formmethod === 'dialog' ? 'submit' : type}
-  class:list={buttonClasses}
-  disabled={disabled}
-  onclick={onClick}
-  formmethod={formmethod}
-  data-variant={variant}
->
-  <span class="cosy:flex cosy:items-center cosy:gap-2">
-    <slot name="icon-left" />
-    <slot />
-    <slot name="icon-right" />
-  </span>
-</button> 
+	type={formmethod === 'dialog' ? 'submit' : type}
+	class:list={buttonClasses}
+	disabled={disabled}
+	onclick={onClick}
+	formmethod={formmethod}
+	data-variant={variant}>
+	<span class="cosy:flex cosy:items-center cosy:gap-2">
+		<slot name="icon-left" />
+		<slot />
+		<slot name="icon-right" />
+	</span>
+</button>
+

package/dist/components/base/Image.astro

@@ -41,7 +41,7 @@
  * ```
  */
 
-import '../../app.css';
+import '../../style.ts';
 import { AlertTriangle } from '../../index';
 
 // 自定义图片元数据接口

package/dist/components/base/Link.astro

@@ -54,7 +54,7 @@
  * ```
  */
 
-import '../../app.css';
+import '../../style.ts';
 
 import type { HTMLAttributes } from 'astro/types';
 

package/dist/components/containers/Container.astro

@@ -67,7 +67,7 @@
  */
 
 import type { HTMLAttributes } from 'astro/types';
-import '../../app.css';
+import '../../style.ts';
 
 interface Props extends HTMLAttributes<'div'> {
 	/**

package/dist/components/containers/Main.astro

@@ -47,7 +47,7 @@
  * </Main>
  * ```
  */
-import '../../app.css';
+import '../../style.ts';
 import type { IMainContentProps } from '../../index';
 import Article from '../typography/Article.astro';
 import TableOfContents from '../navigation/TableOfContents.astro';

package/dist/components/containers/Section.astro

@@ -1,16 +1,16 @@
 ---
 /**
  * Section组件
- * 
+ *
  * 一个用于页面内容区块的组件，支持不同的内边距、背景和间距
- * 
+ *
  * @example
  * ```astro
  * <Section>
  *   <h2>默认区块</h2>
  *   <p>内容将被包裹在一个合适的区块中</p>
  * </Section>
- * 
+ *
  * <Section padding="lg" background="gray" centered={true} border={true}>
  *   <h2>自定义区块</h2>
  *   <p>大内边距，灰色背景，内容居中，带边框</p>
@@ -20,105 +20,105 @@
 
 import type { HTMLAttributes } from 'astro/types';
 import Container from './Container.astro';
-import "../../app.css"
+import '../../style.ts';
 
 interface Props extends HTMLAttributes<'section'> {
-  /**
-   * 内边距大小
-   * @default "md"
-   */
-  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /**
-   * 背景颜色
-   * @default "transparent"
-   */
-  background?: 'transparent' | 'white' | 'gray' | 'primary' | 'secondary' | 'dark';
-  
-  /**
-   * 是否使用容器包裹内容
-   * @default true
-   */
-  container?: boolean;
-  
-  /**
-   * 容器尺寸，仅当container为true时有效
-   * @default "md"
-   */
-  containerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-  
-  /**
-   * 内容是否居中
-   * @default false
-   */
-  centered?: boolean;
-
-  /**
-   * 是否显示边框
-   * @default false
-   */
-  border?: boolean;
-  
-  /**
-   * 自定义类名
-   */
-  class?: string;
-  
-  /**
-   * 类名列表
-   */
-  'class:list'?: any;
-  
-  /**
-   * 自定义ID
-   */
-  id?: string;
-  
-  /**
-   * 自定义内联样式
-   */
-  style?: string;
+	/**
+	 * 内边距大小
+	 * @default "md"
+	 */
+	padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+	/**
+	 * 背景颜色
+	 * @default "transparent"
+	 */
+	background?: 'transparent' | 'white' | 'gray' | 'primary' | 'secondary' | 'dark';
+
+	/**
+	 * 是否使用容器包裹内容
+	 * @default true
+	 */
+	container?: boolean;
+
+	/**
+	 * 容器尺寸，仅当container为true时有效
+	 * @default "md"
+	 */
+	containerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+	/**
+	 * 内容是否居中
+	 * @default false
+	 */
+	centered?: boolean;
+
+	/**
+	 * 是否显示边框
+	 * @default false
+	 */
+	border?: boolean;
+
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+
+	/**
+	 * 类名列表
+	 */
+	'class:list'?: any;
+
+	/**
+	 * 自定义ID
+	 */
+	id?: string;
+
+	/**
+	 * 自定义内联样式
+	 */
+	style?: string;
 }
 
 const {
-  padding = 'md',
-  background = 'transparent',
-  container = true,
-  containerSize = 'md',
-  centered = false,
-  border = false,
-  class: className = '',
-  'class:list': classList,
-  id,
-  style,
-  ...rest
+	padding = 'md',
+	background = 'transparent',
+	container = true,
+	containerSize = 'md',
+	centered = false,
+	border = false,
+	class: className = '',
+	'class:list': classList,
+	id,
+	style,
+	...rest
 } = Astro.props;
 
 // 内边距映射
 const paddingClasses = {
-  'none': 'cosy:py-0',
-  'sm': 'cosy:py-6',
-  'md': 'cosy:py-12',
-  'lg': 'cosy:py-16',
-  'xl': 'cosy:py-24'
+	none: 'cosy:py-0',
+	sm: 'cosy:py-6',
+	md: 'cosy:py-12',
+	lg: 'cosy:py-16',
+	xl: 'cosy:py-24',
 };
 
 // 背景颜色映射
 const backgroundClasses = {
-  'transparent': 'cosy:bg-transparent',
-  'white': 'cosy:bg-base-100',
-  'gray': 'cosy:bg-base-200',
-  'primary': 'cosy:bg-primary/10',
-  'secondary': 'cosy:bg-secondary/10',
-  'dark': 'cosy:bg-neutral cosy:text-neutral-content'
+	transparent: 'cosy:bg-transparent',
+	white: 'cosy:bg-base-100',
+	gray: 'cosy:bg-base-200',
+	primary: 'cosy:bg-primary/10',
+	secondary: 'cosy:bg-secondary/10',
+	dark: 'cosy:bg-neutral cosy:text-neutral-content',
 };
 
 // 构建最终类名
 const sectionClasses = [
-  paddingClasses[padding as keyof typeof paddingClasses],
-  backgroundClasses[background as keyof typeof backgroundClasses],
-  border ? 'cosy:border cosy:rounded-lg' : '',
-  className
+	paddingClasses[padding as keyof typeof paddingClasses],
+	backgroundClasses[background as keyof typeof backgroundClasses],
+	border ? 'cosy:border cosy:rounded-lg' : '',
+	className,
 ].join(' ');
 
 // 内容类名
@@ -126,13 +126,15 @@ const contentClasses = centered ? 'cosy:text-center' : '';
 ---
 
 <section id={id} class:list={[sectionClasses, classList]} style={style} {...rest}>
-  {container ? (
-    <Container size={containerSize} class={contentClasses}>
-      <slot />
-    </Container>
-  ) : (
-    <div class={contentClasses}>
-      <slot />
-    </div>
-  )}
+	{
+		container ? (
+			<Container size={containerSize} class={contentClasses}>
+				<slot />
+			</Container>
+		) : (
+			<div class={contentClasses}>
+				<slot />
+			</div>
+		)
+	}
 </section>

package/dist/components/data-display/Blog.astro

@@ -39,7 +39,7 @@
  * ```
  */
 
-import '../../app.css';
+import '../../style.ts';
 import { UserIcon, CalendarIcon } from '../../index';
 
 interface Props {

package/dist/components/data-display/ProductCard.astro

@@ -66,10 +66,8 @@
  * ```
  */
 
-import Link from '../base/Link.astro';
-import Image from '../base/Image.astro';
-import SocialIcon from '../icons/SocialIcon.astro';
-import '../../app.css';
+import { SocialIcon, Image, Link } from '../../index';
+import '../../style.ts';
 
 // 自定义图片元数据接口，替代 astro 的 ImageMetadata
 interface CustomImageMetadata {

package/dist/components/data-display/Products.astro

@@ -62,8 +62,8 @@
  * ```
  */
 
-import ProductCard from './ProductCard.astro';
-import '../../app.css';
+import { ProductCard } from '../../index';
+import '../../style.ts';
 import type { Props as ProductCardProps } from './ProductCard.astro';
 
 // 定义产品项类型

package/dist/components/data-display/TeamMember.astro

@@ -40,10 +40,8 @@
  * ```
  */
 
-import Link from '../base/Link.astro';
-import SocialIcon from '../icons/SocialIcon.astro';
-import Image from '../base/Image.astro';
-import '../../app.css';
+import { SocialIcon, Image, Link } from '../../index';
+import '../../style.ts';
 
 interface SocialLink {
 	/**

package/dist/components/data-display/TeamMembers.astro

@@ -30,7 +30,7 @@
  */
 
 import TeamMember from './TeamMember.astro';
-import '../../app.css';
+import '../../style.ts';
 
 // 自定义图片元数据接口
 interface ImageMetadata {

package/dist/components/display/Banner.astro

@@ -40,7 +40,7 @@
  * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
  */
 
-import '../../app.css';
+import '../../style.ts';
 
 interface Props {
 	/**

package/dist/components/display/Card.astro

@@ -68,7 +68,7 @@
  * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
  */
 
-import '../../app.css';
+import '../../style.ts';
 
 interface Props {
 	title?: string;

package/dist/components/display/CodeBlock.astro

@@ -47,7 +47,7 @@
  * - 代码使用等宽字体，确保对齐和可读性
  */
 
-import '../../app.css';
+import '../../style.ts';
 
 interface Props {
 	code: string;

package/dist/components/display/CodeExample.astro

@@ -28,7 +28,7 @@
  */
 
 import { ClipboardIcon, CheckIcon } from '../../index';
-import '../../app.css';
+import '../../style.ts';
 
 interface Props {
 	title?: string;

package/dist/components/display/Hero.astro

@@ -150,7 +150,7 @@
  * @prop {number} [overlayOpacity=0.7] - 遮罩的不透明度，可选值：0-1之间的数字
  */
 
-import '../../app.css';
+import '../../style.ts';
 import Link from '../base/Link.astro';
 
 interface Link {

package/dist/components/display/Modal.astro

@@ -44,7 +44,7 @@
  * ```
  */
 
-import '../../app.css';
+import '../../style.ts';
 import Button from '../base/Button.astro';
 
 interface Props {

package/dist/components/layouts/AppLayout.astro

@@ -165,15 +165,11 @@
  * ```
  */
 
-import '../../app.css';
-import BaseLayout from './BaseLayout.astro';
-import Footer from './Footer.astro';
+import '../../style.ts';
+import { BaseLayout, type IAppLayoutProps, Footer, Header, Container } from '../../index';
 import Main from '../containers/Main.astro';
-import Header from './Header.astro';
 import Sidebar from './Sidebar.astro';
 import { ClientRouter } from 'astro:transitions';
-import type { IAppLayoutProps } from '../../index';
-import Container from '../containers/Container.astro';
 
 interface Props extends IAppLayoutProps {}