@coffic/cosy-ui 0.6.24 → 0.6.28

package/dist/link/LinkVariants.astro

@@ -0,0 +1,20 @@
+---
+import Link from './Link.astro';
+---
+
+<div class="cosy:space-y-4">
+	<div class="cosy:flex cosy:gap-4">
+		<Link href="/signup" variant="primary">主要链接</Link>
+		<Link href="/learn-more" variant="secondary">次要链接</Link>
+		<Link href="/docs" variant="text">文本链接</Link>
+		<Link href="/get-started" variant="cta">行动号召</Link>
+		<Link href="/preview" variant="ghost">幽灵链接</Link>
+		<Link href="/help" variant="light">浅色链接</Link>
+	</div>
+
+	<div class="cosy:flex cosy:gap-4">
+		<Link href="/small" size="sm">小型链接</Link>
+		<Link href="/medium" size="md">中型链接</Link>
+		<Link href="/large" size="lg">大型链接</Link>
+	</div>
+</div>

package/dist/link/index.ts

@@ -0,0 +1,17 @@
+import Link from './Link.astro';
+import LinkBasic from './LinkBasic.astro';
+import LinkVariants from './LinkVariants.astro';
+import LinkAnimations from './LinkAnimations.astro';
+import BasicSourceCode from './LinkBasic.astro?raw';
+import VariantsSourceCode from './LinkVariants.astro?raw';
+import AnimationsSourceCode from './LinkAnimations.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Link, LinkBasic, LinkVariants, LinkAnimations };
+
+// 导出示例源代码
+export const LinkExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Link'),
+	Variants: extractSimpleExample(VariantsSourceCode, 'Link'),
+	Animations: extractSimpleExample(AnimationsSourceCode, 'Link'),
+};

package/dist/module/Module.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * @component Module
+ *
+ * @description
+ * Module 组件用于展示包含图片、标题和描述的内容模块。
+ * 适用于特性展示、产品介绍等场景。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Module
+ *   title="模块标题"
+ *   description="模块描述文本"
+ *   image={moduleImage}
+ * />
+ * ```
+ *
+ * 在网格中使用：
+ * ```astro
+ * <div class="cosy:grid cosy:grid-cols-3 cosy:gap-8">
+ *   <Module title="特性一" description="描述" image={image1} />
+ *   <Module title="特性二" description="描述" image={image2} />
+ *   <Module title="特性三" description="描述" image={image3} />
+ * </div>
+ * ```
+ */
+
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import '../style.ts';
+
+interface Props {
+	/**
+	 * 模块标题
+	 */
+	title: string;
+	/**
+	 * 模块描述
+	 */
+	description: string;
+	/**
+	 * 模块图片
+	 */
+	image: ImageMetadata;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { title, description, image, class: className = '' } = Astro.props;
+---
+
+<div class={`cosy:flex cosy:flex-col cosy:items-center cosy:gap-4 ${className}`}>
+	<div class="cosy:w-48 cosy:h-48 cosy:relative">
+		<Image src={image} alt={title} class="cosy:w-full cosy:h-full cosy:object-contain" />
+	</div>
+	<h3 class="cosy:text-xl cosy:font-semibold cosy:text-center">{title}</h3>
+	<p class="cosy:text-base-content/70 cosy:text-center cosy:max-w-sm">{description}</p>
+</div>

package/dist/module/ModuleBasic.astro

@@ -0,0 +1,12 @@
+---
+import { Module } from '../index';
+import demoImage from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:grid cosy:grid-cols-1 cosy:gap-8 cosy:max-w-xl">
+	<Module
+		title="基础模块示例"
+		description="这是一个基础的模块示例，展示了标题、描述和图片的基本布局。"
+		image={demoImage}
+	/>
+</div>

package/dist/module/ModuleCustom.astro

@@ -0,0 +1,14 @@
+---
+import Module from './Module.astro';
+import customImage from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:bg-base-200 cosy:p-8 cosy:rounded-xl">
+	<div class="cosy:max-w-2xl cosy:mx-auto">
+		<Module
+			title="自定义样式模块"
+			description="这个模块展示了如何通过容器添加自定义样式，比如背景色、内边距和圆角等。"
+			image={customImage}
+		/>
+	</div>
+</div>

package/dist/module/ModuleGrid.astro

@@ -0,0 +1,26 @@
+---
+import { Module } from '../index';
+import featureImage1 from '../assets/logo-rounded.png';
+import featureImage2 from '../assets/logo-rounded.png';
+import featureImage3 from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:grid cosy:grid-cols-1 md:cosy:grid-cols-2 lg:cosy:grid-cols-3 cosy:gap-8">
+	<Module
+		title="特性一"
+		description="这是第一个特性的详细描述，介绍了该功能的主要优点和使用场景。"
+		image={featureImage1}
+	/>
+
+	<Module
+		title="特性二"
+		description="这是第二个特性的详细描述，展示了该功能如何帮助用户解决问题。"
+		image={featureImage2}
+	/>
+
+	<Module
+		title="特性三"
+		description="这是第三个特性的详细描述，说明了该功能带来的独特价值。"
+		image={featureImage3}
+	/>
+</div>

package/dist/module/index.ts

@@ -0,0 +1,17 @@
+import Module from './Module.astro';
+import ModuleBasic from './ModuleBasic.astro';
+import ModuleGrid from './ModuleGrid.astro';
+import ModuleCustom from './ModuleCustom.astro';
+import BasicSourceCode from './ModuleBasic.astro?raw';
+import GridSourceCode from './ModuleGrid.astro?raw';
+import CustomSourceCode from './ModuleCustom.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Module, ModuleBasic, ModuleGrid, ModuleCustom };
+
+// 导出示例源代码
+export const ModuleExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Module'),
+	Grid: extractSimpleExample(GridSourceCode, 'Module'),
+	Custom: extractSimpleExample(CustomSourceCode, 'Module'),
+};

package/dist/{components/layouts → nav-item}/NavItems.astro

@@ -14,9 +14,8 @@
  * />
  * ```
  */
-import '../../style.ts';
-import Link from '../base/Link.astro';
-import type { INavItem } from '../../index';
+import '../style.ts';
+import { type INavItem, Link } from '../index';
 
 interface Props {
 	navItems: INavItem[];

package/dist/nav-item/NavItemsBasic.astro

@@ -0,0 +1,27 @@
+---
+import NavItems from './NavItems.astro';
+
+const navItems = [
+	{
+		label: '首页',
+		href: '/',
+	},
+	{
+		label: '文档',
+		href: '/docs',
+	},
+	{
+		label: '组件',
+		href: '/components',
+	},
+	{
+		label: '博客',
+		href: '/blog',
+	},
+];
+---
+
+<div class="cosy:bg-base-100 cosy:p-4">
+	<NavItems navItems={navItems} activeLink="/docs" linkHeightClass="cosy:h-10" />
+</div>
+

package/dist/nav-item/index.ts

@@ -0,0 +1,11 @@
+import NavItems from './NavItems.astro';
+import NavItemsBasic from './NavItemsBasic.astro';
+import BasicSourceCode from './NavItemsBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { NavItems, NavItemsBasic };
+
+// 导出示例源代码
+export const NavItemsExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'NavItems'),
+};

package/dist/nav-section/NavSection.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * @component NavSection
+ *
+ * @description
+ * NavSection 组件用于在页脚中创建一个导航部分。
+ *
+ * @props
+ * @prop {string} title - 导航部分的标题
+ * @prop {Array<Object>} links - 链接数组，每个对象包含name、href和可选的external属性
+ *
+ */
+
+import { Link } from '../index';
+
+interface NavSectionProps {
+	title: string;
+	links: Array<{ name: string; href: string; external?: boolean }>;
+}
+
+const props = Astro.props as NavSectionProps;
+const { title, links } = props;
+---
+
+<nav
+	class="cosy:flex cosy:flex-col cosy:items-center cosy:gap-3 cosy:hover:bg-base-300 cosy:hover:shadow-lg cosy:p-4 cosy:rounded cosy:h-full! cosy:hover:scale-105 cosy:transition-transform cosy:duration-300">
+	<h6 class="cosy:footer-title">{title}</h6>
+	{
+		links.map((link) => (
+			<Link
+				href={link.href}
+				external={link.external}
+				size="sm"
+				block
+				animation="hover-lift"
+				centerText>
+				{link.name}
+			</Link>
+		))
+	}
+</nav>
+

package/dist/nav-section/NavSectionBasic.astro

@@ -0,0 +1,12 @@
+---
+import NavSection from './NavSection.astro';
+---
+
+<NavSection
+	title="产品"
+	links={[
+		{ name: '首页', href: '/' },
+		{ name: '文档', href: '/docs' },
+		{ name: '组件', href: '/components', external: true },
+	]}
+/>

package/dist/nav-section/index.ts

@@ -0,0 +1,11 @@
+import NavSection from './NavSection.astro';
+import NavSectionBasic from './NavSectionBasic.astro';
+import BasicSourceCode from './NavSectionBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { NavSection, NavSectionBasic };
+
+// 导出示例源代码
+export const NavSectionExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'NavSection'),
+};

package/dist/{components/layouts → sidebar}/Sidebar.astro

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

package/dist/sidebar/SidebarBasic.astro

@@ -0,0 +1 @@
+ 

package/dist/sidebar/index.ts

@@ -0,0 +1,11 @@
+import Sidebar from './Sidebar.astro';
+import SidebarBasic from './SidebarBasic.astro';
+import BasicSourceCode from './SidebarBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Sidebar, SidebarBasic };
+
+// 导出示例源代码
+export const SidebarExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Sidebar'),
+};

package/dist/{components/layouts → sidebar-nav}/SidebarNav.astro

@@ -5,9 +5,9 @@
  * 用于渲染侧边栏的导航内容
  */
 
-import { isPathMatch } from '../../utils/path';
-import '../../style.ts';
-import type { ISidebarItem } from '../../types/sidebar';
+import { isPathMatch } from '../utils/path';
+import '../style.ts';
+import type { ISidebarItem } from '../types/sidebar';
 
 interface Props {
 	/**

package/dist/sidebar-nav/SidebarNavBasic.astro

@@ -0,0 +1,32 @@
+---
+import SidebarNav from './SidebarNav.astro';
+import type { ISidebarItem } from '../types/sidebar';
+
+const sidebarItems: ISidebarItem[] = [
+	{
+		text: '入门指南',
+		href: '/docs/getting-started',
+		items: [
+			{ href: '/docs/getting-started/installation', text: '安装' },
+			{ href: '/docs/getting-started/quick-start', text: '快速开始' },
+		],
+	},
+	{
+		text: '基础组件',
+		href: '/docs/components',
+		items: [
+			{ href: '/docs/components/button', text: 'Button 按钮' },
+			{ href: '/docs/components/alert', text: 'Alert 提示' },
+			{ href: '/docs/components/card', text: 'Card 卡片' },
+		],
+	},
+];
+---
+
+<div class="cosy:w-64 cosy:bg-base-100">
+	<SidebarNav
+		sidebarItems={sidebarItems}
+		currentPath="/docs/getting-started/installation"
+		debug={false}
+	/>
+</div>

package/dist/sidebar-nav/index.ts

@@ -0,0 +1,11 @@
+import SidebarNav from './SidebarNav.astro';
+import SidebarNavBasic from './SidebarNavBasic.astro';
+import BasicSourceCode from './SidebarNavBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { SidebarNav, SidebarNavBasic };
+
+// 导出示例源代码
+export const SidebarNavExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'SidebarNav'),
+};

package/dist/speak/Speak.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * @component Speak
+ *
+ * @description
+ * Speak 组件用于展示人物语录或评价，包含说话者的头像、姓名、头衔和言论。
+ * 适用于用户评价、团队介绍等场景。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Speak
+ *   speakerName="张三"
+ *   speakerTitle="产品经理"
+ *   image={avatar}
+ *   words="这是一个非常棒的产品！"
+ * />
+ * ```
+ */
+
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import '../style.ts';
+
+interface Props {
+	/**
+	 * 说话者姓名
+	 */
+	speakerName: string;
+	/**
+	 * 说话者头衔
+	 */
+	speakerTitle: string;
+	/**
+	 * 说话者头像
+	 */
+	image: ImageMetadata;
+	/**
+	 * 说话内容
+	 */
+	words: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { speakerName, speakerTitle, image, words, class: className = '' } = Astro.props;
+---
+
+<div
+	class={`cosy:flex cosy:flex-col cosy:items-center cosy:gap-4 cosy:p-6 cosy:bg-base-100 cosy:rounded-lg cosy:shadow-lg ${className}`}>
+	<Image
+		src={image}
+		alt={speakerName}
+		class="cosy:w-32 cosy:h-32 cosy:rounded-full cosy:object-cover"
+		width={128}
+		height={128}
+	/>
+	<div class="cosy:text-center">
+		<h3 class="cosy:text-xl cosy:font-semibold cosy:text-base-content">{speakerName}</h3>
+		<p class="cosy:text-base-content/70">{speakerTitle}</p>
+	</div>
+	<p class="cosy:text-base-content/80 cosy:italic cosy:text-center">{words}</p>
+</div>

package/dist/speak/SpeakBasic.astro

@@ -0,0 +1,13 @@
+---
+import { Speak } from '../index';
+import avatar from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:max-w-md">
+	<Speak
+		speakerName="张三"
+		speakerTitle="产品经理"
+		image={avatar}
+		words="这个组件库的设计非常优雅，使用起来非常方便，完全满足了我们的需求！"
+	/>
+</div>

package/dist/speak/SpeakGrid.astro

@@ -0,0 +1,29 @@
+---
+import { Speak } from '../index';
+import avatar1 from '../assets/logo-rounded.png';
+import avatar2 from '../assets/logo-rounded.png';
+import avatar3 from '../assets/logo-rounded.png';
+---
+
+<div class="cosy:grid cosy:grid-cols-1 md:cosy:grid-cols-2 lg:cosy:grid-cols-3 cosy:gap-6">
+	<Speak
+		speakerName="李四"
+		speakerTitle="前端开发"
+		image={avatar1}
+		words="组件的代码结构非常清晰，文档详尽，对开发者非常友好。"
+	/>
+
+	<Speak
+		speakerName="王五"
+		speakerTitle="UI 设计师"
+		image={avatar2}
+		words="设计系统的一致性很好，主题切换功能也很实用。"
+	/>
+
+	<Speak
+		speakerName="赵六"
+		speakerTitle="技术总监"
+		image={avatar3}
+		words="这个组件库的性能和可维护性都很出色，是一个值得信赖的选择。"
+	/>
+</div>

package/dist/speak/index.ts

@@ -0,0 +1,14 @@
+import Speak from './Speak.astro';
+import SpeakBasic from './SpeakBasic.astro';
+import SpeakGrid from './SpeakGrid.astro';
+import BasicSourceCode from './SpeakBasic.astro?raw';
+import GridSourceCode from './SpeakGrid.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Speak, SpeakBasic, SpeakGrid };
+
+// 导出示例源代码
+export const SpeakExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Speak'),
+	Grid: extractSimpleExample(GridSourceCode, 'Speak'),
+};

package/dist/{components/layouts → stack}/Stack.astro

@@ -49,7 +49,7 @@
  */
 
 // 导入样式
-import '../../style.ts';
+import '../style.ts';
 
 // 定义间距类型
 type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/stack/StackBasic.astro

@@ -0,0 +1,15 @@
+---
+import Stack from './Stack.astro';
+---
+
+<Stack gap="md" align="center">
+	<div style="background: #60a5fa; color: white; padding: 16px; border-radius: 8px;">
+		第一个元素
+	</div>
+	<div style="background: #34d399; color: white; padding: 16px; border-radius: 8px;">
+		第二个元素
+	</div>
+	<div style="background: #f59e42; color: white; padding: 16px; border-radius: 8px;">
+		第三个元素
+	</div>
+</Stack>

package/dist/stack/index.ts

@@ -0,0 +1,11 @@
+import Stack from './Stack.astro';
+import StackBasic from './StackBasic.astro';
+import BasicSourceCode from './StackBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Stack, StackBasic };
+
+// 导出示例源代码
+export const StackExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Stack'),
+};

package/dist/{components/typography → text}/Text.astro

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

package/dist/text/TextBasic.astro

@@ -0,0 +1,12 @@
+---
+import Text from './Text.astro';
+---
+
+<Text>这是一段普通文本</Text>
+<Text size="xl" color="primary" weight="bold">超大主色粗体文本</Text>
+<Text size="sm" color="secondary" italic>小号次色斜体文本</Text>
+<Text size="lg" align="center" underline>居中大号带下划线文本</Text>
+<Text size="md" weight="light" color="muted">中号柔和色细体文本</Text>
+<Text truncate style="max-width: 120px; display: block;"
+	>这是一段很长的文本，将会被截断并显示省略号...</Text
+>

package/dist/text/TextSizes.astro

@@ -0,0 +1,11 @@
+---
+import Text from './Text.astro';
+---
+
+<div class="cosy:space-y-4">
+	<Text size="xs">超小号文本 (xs)</Text>
+	<Text size="sm">小号文本 (sm)</Text>
+	<Text size="md">中号文本 (md)</Text>
+	<Text size="lg">大号文本 (lg)</Text>
+	<Text size="xl">超大号文本 (xl)</Text>
+</div>

package/dist/text/index.ts

@@ -0,0 +1,11 @@
+import Text from './Text.astro';
+import TextBasic from './TextBasic.astro';
+import BasicSourceCode from './TextBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Text, TextBasic };
+
+// 导出示例源代码
+export const TextExampleCodes = {
+	Basic: extractSimpleExample(BasicSourceCode, 'Text'),
+};

package/dist/theme-item/ThemeItem.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * @component ThemeItem
+ *
+ * @description
+ * ThemeItem 组件用于主题切换菜单中的单个主题项。
+ * 它基于 Button 组件，提供了主题切换的交互功能。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ThemeItem theme="light" label="浅色主题" />
+ * <ThemeItem theme="dark" label="深色主题" />
+ * ```
+ */
+
+import { Button } from '../index';
+import '../style.ts';
+
+interface Props {
+	/**
+	 * 主题名称
+	 */
+	theme: string;
+	/**
+	 * 显示的标签文本
+	 */
+	label: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { theme, label, class: className = '' } = Astro.props;
+---
+
+<Button
+	variant="ghost"
+	size="sm"
+	block
+	class={`cosy:text-left cosy:justify-start ${className}`}
+	data-set-theme={theme}>
+	{label}
+</Button>

package/dist/theme-item/ThemeItemBasic.astro

@@ -0,0 +1,10 @@
+---
+import ThemeItem from './ThemeItem.astro';
+---
+
+<div class="cosy:w-48 cosy:space-y-2">
+	<ThemeItem theme="light" label="浅色主题" />
+	<ThemeItem theme="dark" label="深色主题" />
+	<ThemeItem theme="cupcake" label="糖果主题" />
+	<ThemeItem theme="dracula" label="德古拉主题" />
+</div>