@coffic/cosy-ui 0.1.29 → 0.2.2

package/dist/components/display/Hero.astro

@@ -0,0 +1,119 @@
+---
+/**
+ * @component Hero
+ * 
+ * @description
+ * Hero 组件是一个全屏的展示区域，通常用于网站的首页或重要页面的顶部。
+ * 它提供了一个引人注目的视觉区域，可以包含标题、描述、图片和行动按钮。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 视觉冲击力 - 全屏展示，吸引用户注意
+ * 2. 内容聚焦 - 清晰地传达核心信息
+ * 3. 引导行动 - 通过链接按钮引导用户进行下一步操作
+ * 4. 灵活布局 - 支持图片、标题、描述和自定义内容
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Hero
+ *   title="欢迎使用我们的产品"
+ *   description="这是一个简短的描述，介绍产品的主要特点和价值。"
+ *   links={[
+ *     { text: "开始使用", href: "/getting-started" },
+ *     { text: "了解更多", href: "/about" }
+ *   ]}
+ * />
+ * ```
+ * 
+ * 带图片的用法：
+ * ```astro
+ * <Hero
+ *   title="产品展示"
+ *   description="查看我们的最新产品。"
+ *   image={{ src: "/images/product.png", alt: "产品图片" }}
+ *   links={[
+ *     { text: "立即购买", href: "/buy" }
+ *   ]}
+ * />
+ * ```
+ * 
+ * 带自定义内容的用法：
+ * ```astro
+ * <Hero
+ *   title="交互式演示"
+ *   description="尝试我们的交互式演示。"
+ *   links={[
+ *     { text: "查看文档", href: "/docs" }
+ *   ]}
+ * >
+ *   <div slot="app">
+ *     <InteractiveDemo />
+ *   </div>
+ * </Hero>
+ * ```
+ * 
+ * @props
+ * @prop {string} title - Hero 区域的主标题
+ * @prop {string} description - 标题下方的描述文本
+ * @prop {Object} [image] - 可选的图片配置
+ * @prop {string} image.src - 图片的源地址
+ * @prop {string} image.alt - 图片的替代文本
+ * @prop {Array<Link>} links - 链接按钮数组
+ * @prop {string} links[].text - 链接按钮的文本
+ * @prop {string} links[].href - 链接按钮的目标地址
+ */
+
+// 导入样式
+import '../../app.css';
+
+import Link from '../base/Link.astro';
+
+interface Link {
+	text: string;
+	href: string;
+}
+
+interface Props {
+	title: string;
+	description: string;
+	image?: {
+		src: string;
+		alt: string;
+	};
+	links: Link[];
+}
+
+const { title, description, image, links = [] } = Astro.props;
+---
+
+<div class="hero-container">
+	<div class="hero-content">
+		{image && <img src={image.src} alt={image.alt} class="hero-image" />}
+
+		<h2 class="hero-title">{title}</h2>
+		<p class="hero-description">
+			{description}
+		</p>
+
+		<div class="hero-app">
+			<slot name="app" />
+		</div>
+
+		<div class="hero-links">
+			{
+				links.map((link: Link) => (
+					<Link
+						href={link.href}
+						external
+						variant="cta"
+						animation="hover-lift"
+						size="lg"
+					>
+						{link.text}
+					</Link>
+				))
+			}
+		</div>
+	</div>
+</div>

package/dist/components/display/Modal.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * @component Modal
+ * 
+ * @description
+ * Modal 组件是一个模态对话框，用于在不离开当前页面的情况下显示内容、通知或请求用户输入。
+ * 它会覆盖在页面内容上方，并提供一个聚焦的交互环境。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 聚焦交互 - 通过遮罩层和动画效果引导用户注意力
+ * 2. 灵活布局 - 支持标题、内容和操作按钮的灵活组合
+ * 3. 可访问性 - 支持键盘导航和屏幕阅读器
+ * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的用户体验
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Modal id="my-modal" title="提示">
+ *   <p>这是一个模态对话框的内容。</p>
+ *   <button slot="actions" data-modal-target="my-modal">关闭</button>
+ * </Modal>
+ * 
+ * <!-- 触发按钮 -->
+ * <button data-modal-target="my-modal">打开模态框</button>
+ * ```
+ * 
+ * 自定义操作按钮：
+ * ```astro
+ * <Modal id="confirm-modal" title="确认操作">
+ *   <p>您确定要执行此操作吗？</p>
+ *   <div slot="actions">
+ *     <button class="btn btn-primary">确认</button>
+ *     <button class="btn" data-modal-target="confirm-modal">取消</button>
+ *   </div>
+ * </Modal>
+ * ```
+ * 
+ * 不带标题的模态框：
+ * ```astro
+ * <Modal id="image-modal">
+ *   <img src="/images/large-image.jpg" alt="大图预览" />
+ * </Modal>
+ * ```
+ */
+
+// 导入样式
+import '../../app.css';
+
+interface Props {
+    /**
+     * Modal 的唯一标识符
+     */
+    id: string;
+    /**
+     * 模态框的标题
+     */
+    title?: string;
+    /**
+     * 是否显示关闭按钮
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const {
+    id,
+    title,
+    showCloseButton = true,
+    class: className = '',
+} = Astro.props;
+---
+
+<dialog id={id} class="modal">
+    <div class:list={["modal-box", className]}>
+        {showCloseButton && (
+            <form method="dialog">
+                <button class="modal-close-button">✕</button>
+            </form>
+        )}
+        
+        {title && <h3 class="modal-title">{title}</h3>}
+        
+        <div class="modal-content">
+            <slot />
+        </div>
+
+        <div class="modal-action">
+            <slot name="actions" />
+        </div>
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+        <button>关闭</button>
+    </form>
+</dialog>
+
+<script define:vars={{ id }}>
+// 为了方便使用，我们提供一些辅助方法
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById(id);
+    if (!modal) return;
+
+    // 为所有触发这个模态框的按钮添加点击事件
+    document.querySelectorAll(`[data-modal-target="${id}"]`).forEach(trigger => {
+        trigger.addEventListener('click', () => {
+            modal.showModal();
+        });
+    });
+});
+</script> 

package/dist/components/icons/AlertTriangle.astro

@@ -0,0 +1,35 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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="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> 

package/dist/components/icons/CalendarIcon.astro

@@ -0,0 +1,38 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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}
+>
+  <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> 

package/dist/components/icons/CheckCircle.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+  <polyline points="22 4 12 14.01 9 11.01"></polyline>
+</svg> 

package/dist/components/icons/CheckIcon.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * 检查图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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}
+>
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg> 

package/dist/components/icons/ClipboardIcon.astro

@@ -0,0 +1,39 @@
+---
+/**
+ * 剪贴板图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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}
+>
+  <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> 

package/dist/components/icons/CloseIcon.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * 关闭图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "16px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { size = '16px', 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="M6 18L18 6M6 6l12 12" />
+</svg> 

package/dist/components/icons/ErrorIcon.astro

@@ -0,0 +1,35 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg> 

package/dist/components/icons/GithubIcon.astro

@@ -0,0 +1,31 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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={color}
+  class={className}
+>
+  <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+</svg> 

package/dist/components/icons/InfoCircle.astro

@@ -0,0 +1,37 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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}
+>
+  <circle cx="12" cy="12" r="10"></circle>
+  <line x1="12" y1="16" x2="12" y2="12"></line>
+  <line x1="12" y1="8" x2="12.01" y2="8"></line>
+</svg> 

package/dist/components/icons/InfoIcon.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * 信息图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+</svg> 

package/dist/components/icons/LinkIcon.astro

@@ -0,0 +1,39 @@
+---
+/**
+ * 链接图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+</svg> 

package/dist/components/icons/LinkedinIcon.astro

@@ -0,0 +1,31 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+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={color}
+  class={className}
+>
+  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+</svg>