@coffic/cosy-ui 0.6.30 → 0.6.34

package/dist/hero/HeroBasicContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../index';
+import HeroBasic from './HeroBasic.astro';
+import HeroBasicSourceCode from './HeroBasic.astro?raw';
+---
+
+<CodeContainer codes={[HeroBasicSourceCode]}>
+	<div id="tab-1">
+		<HeroBasic />
+	</div>
+</CodeContainer>

package/dist/hero/HeroGradientBackground.astro

@@ -0,0 +1,10 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+	title="渐变色背景"
+	description="这个例子使用了渐变色背景样式。"
+	background="gradient"
+	links={[{ text: '了解更多', href: '/about' }]}
+/>

package/dist/hero/HeroPlainBackground.astro

@@ -0,0 +1,10 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+	title="纯色背景"
+	description="这个例子使用了纯色背景样式。"
+	background="plain"
+	links={[{ text: '了解更多', href: '/about' }]}
+/>

package/dist/hero/HeroWithButton.astro

@@ -0,0 +1,11 @@
+---
+import Hero from './Hero.astro';
+import Button from '../button/Button.astro';
+---
+
+<Hero title="带自定义按钮的Hero" description="这是一个带有自定义按钮的Hero组件示例。" links={[]}>
+	<div slot="actions" class="cosy:flex cosy:gap-4">
+		<Button variant="primary">主要操作</Button>
+		<Button variant="secondary">次要操作</Button>
+	</div>
+</Hero>

package/dist/hero/HeroWithButtonContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../index';
+import HeroWithButton from './HeroWithButton.astro';
+import HeroWithButtonSourceCode from './HeroWithButton.astro?raw';
+---
+
+<CodeContainer codes={[HeroWithButtonSourceCode]}>
+	<div id="tab-1">
+		<HeroWithButton />
+	</div>
+</CodeContainer>

package/dist/hero/HeroWithImage.astro

@@ -0,0 +1,16 @@
+---
+import Hero from './Hero.astro';
+import { getExampleImage } from '../index_utils';
+
+const image = {
+	src: getExampleImage({ width: 400, height: 300, provider: 'picsum' }),
+	alt: '示例图片',
+};
+---
+
+<Hero
+	title="带图片的Hero"
+	description="这是一个带有图片的Hero组件示例。"
+	image={image}
+	links={[{ text: '查看详情', href: '#' }]}
+/>

package/dist/hero/HeroWithImageContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../index';
+import HeroWithImage from './HeroWithImage.astro';
+import HeroWithImageSourceCode from './HeroWithImage.astro?raw';
+---
+
+<CodeContainer codes={[HeroWithImageSourceCode]}>
+	<div id="tab-1">
+		<HeroWithImage />
+	</div>
+</CodeContainer>

package/dist/hero/index.ts

@@ -0,0 +1,39 @@
+import Hero from './Hero.astro';
+import HeroBasic from './HeroBasic.astro';
+import HeroAlignCenter from './HeroAlignCenter.astro';
+import HeroAlignLeft from './HeroAlignLeft.astro';
+import HeroAlignRight from './HeroAlignRight.astro';
+import HeroWithImage from './HeroWithImage.astro';
+import HeroWithButton from './HeroWithButton.astro';
+import HeroPlainBackground from './HeroPlainBackground.astro';
+import HeroGradientBackground from './HeroGradientBackground.astro';
+import HeroBackgroundImage from './HeroBackgroundImage.astro';
+import HeroBasicContainer from './HeroBasicContainer.astro';
+import HeroAlignContainer from './HeroAlignContainer.astro';
+import HeroWithImageContainer from './HeroWithImageContainer.astro';
+import HeroWithButtonContainer from './HeroWithButtonContainer.astro';
+import HeroBackgroundContainer from './HeroBackgroundContainer.astro';
+import HeroBackgroundImageContainer from './HeroBackgroundImageContainer.astro';
+
+export { Hero };
+
+export const HeroPackage = {
+    Hero,
+    HeroBasic,
+    HeroAlignCenter,
+    HeroAlignLeft,
+    HeroAlignRight,
+    HeroWithImage,
+    HeroWithButton,
+    HeroPlainBackground,
+    HeroGradientBackground,
+    HeroBackgroundImage,
+    HeroContainers: {
+        Basic: HeroBasicContainer,
+        Align: HeroAlignContainer,
+        WithImage: HeroWithImageContainer,
+        WithButton: HeroWithButtonContainer,
+        Background: HeroBackgroundContainer,
+        BackgroundImage: HeroBackgroundImageContainer
+    }
+};

package/dist/index.ts

@@ -1,3 +1,3 @@
 export * from './index_astro';
 export * from './index_utils';
-export * from './index_icons';
+export * from './index_icons';

package/dist/index_astro.ts

@@ -1,8 +1,11 @@
-export * from './button';
+export * from './button/index_astro';
+export * from './banner';
+export * from './blog';
+export * from './card';
+export * from './code-container';
 export * from './article';
 export * from './link';
 export * from './image';
-export * from './theme-item';
 export * from './alert';
 export * from './footer';
 export * from './layout-app';
@@ -23,29 +26,19 @@ export * from './heading';
 export * from './stack';
 export * from './text';
 export * from './nav-section';
-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';
-export { default as TeamMembers } from './components/data-display/TeamMembers.astro';
-export { default as TeamMember } from './components/data-display/TeamMember.astro';
-export { default as ProductCard } from './components/data-display/ProductCard.astro';
-export { default as Products } from './components/data-display/Products.astro';
-export { default as Blog } from './components/data-display/Blog.astro';
+export * from './team-member';
+export * from './code-block';
+export * from './modal';
+export * from './hero';
+export * from './code-example';
+export * from './products';
+export * from './blog';
 export * from './layout-basic/BaseLayout.astro';
-export { default as DashboardLayout } from './layout-dashboard/DashboardLayout.astro';
-
-// Icons
+export * from './layout-dashboard';
 export * from './index_icons';
-
-// 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';
-
-// Types
+export * from './container';
+export * from './main';
+export * from './section';
 export * from './types/sidebar';
 export * from './types/main';
 export * from './types/article';
@@ -58,8 +51,6 @@ export * from './types/product';
 export * from './types/footer';
 export * from './types/static-path';
 export type { ImageProvider, ImageOptions } from './utils/image';
-
-// Entities
 export * from './entities/BaseDoc';
 export * from './entities/BlogDoc';
 export * from './entities/CourseDoc';
@@ -68,8 +59,6 @@ export * from './entities/LessonDoc';
 export * from './entities/MetaDoc';
 export * from './entities/SidebarItem';
 export * from './entities/Tag';
-
-// Database
 export * from './database/BaseDB';
 export * from './database/BlogDB';
 export * from './database/CourseDB';

package/dist/index_vue.ts

@@ -10,15 +10,12 @@ export * from './vue/BlogList';
 // Counter
 export { default as VueCounter } from './vue/VueCounter.vue';
 
-// SmartHero
-export { SmartHero, SmartHeroExamples, SmartHeroExampleCodes } from './vue/SmartHero';
-
 // ConfirmDialog
 export { default as ConfirmDialog } from './vue/ConfirmDialog/ConfirmDialog.vue';
 export { ConfirmDialogExamples, ConfirmDialogExampleCodes } from './vue/ConfirmDialog';
 
 // Buttons
-export * from './vue/Buttons';
+export * from './button/index_vue';
 
 export { default as FeatureCard } from './vue/BannerBox/FeatureCard.vue';
 

package/dist/language-switcher/LanguageSwitcher.astro

@@ -27,9 +27,8 @@
  * ```
  */
 
-import { ChevronDownIcon } from '../index';
+import { ChevronDownIcon, LanguageUtil } from '../index';
 import '../style.ts';
-import { LanguageUtil } from '../utils/language.ts';
 
 interface Props {
 	languages: string[];

package/dist/{components/containers → main}/Main.astro

@@ -47,9 +47,8 @@
  * </Main>
  * ```
  */
-import '../../style.ts';
-import type { IMainContentProps } from '../../index';
-import { Article, TableOfContents } from '../../index';
+import '../style.ts';
+import { Article, TableOfContents, type IMainContentProps } from '../index';
 
 export interface Props extends IMainContentProps {}
 

package/dist/main/index.ts

@@ -0,0 +1 @@
+export { default as Main } from     './Main.astro';

package/dist/{components/display → modal}/Modal.astro

@@ -44,8 +44,8 @@
  * ```
  */
 
-import '../../style.ts';
-import { Button } from '../../index';
+import '../style.ts';
+import { Button } from '../index';
 
 interface Props {
 	/**

package/dist/modal/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from    './Modal.astro';

package/dist/{components/data-display → products}/ProductCard.astro

@@ -66,9 +66,9 @@
  * ```
  */
 
-import { SocialIcon, Image, Link } from '../../index';
-import '../../style.ts';
-import type { ImageSource } from '../../types/image';
+import { SocialIcon, Image, Link } from '../index';
+import '../style.ts';
+import type { ImageSource } from '../types/image';
 
 // 自定义图片元数据接口，替代 astro 的 ImageMetadata
 interface CustomImageMetadata {

package/dist/{components/data-display → products}/Products.astro

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

package/dist/products/index.ts

@@ -0,0 +1,2 @@
+export { default as Products } from './Products.astro';
+export { default as ProductCard } from './ProductCard.astro';

package/dist/{components/containers → section}/Section.astro

@@ -19,8 +19,8 @@
  */
 
 import type { HTMLAttributes } from 'astro/types';
-import Container from './Container.astro';
-import '../../style.ts';
+import Container from '../container/Container.astro';
+import '../style.ts';
 
 interface Props extends HTMLAttributes<'section'> {
 	/**

package/dist/section/index.ts

@@ -0,0 +1 @@
+export { default as Section } from './Section.astro';

package/dist/sidebar/Sidebar.astro

@@ -23,8 +23,7 @@
 
 import '../style.ts';
 import { isPathMatch } from '../utils/path';
-import Modal from '../components/display/Modal.astro';
-import { MenuIcon, SidebarNav } from '../index';
+import { MenuIcon, SidebarNav, Modal } from '../index';
 import type { ISidebarProps } from '../index';
 
 export interface Props extends ISidebarProps {}

package/dist/{components/data-display → team-member}/TeamMember.astro

@@ -40,9 +40,9 @@
  * ```
  */
 
-import { SocialIcon, Image, Link } from '../../index';
-import '../../style.ts';
-import type { ImageSource } from '../../types/image';
+import '../style.ts';
+import { SocialIcon, Image, Link } from '../index';
+import type { ImageSource } from '../types/image';
 
 interface SocialLink {
 	/**
@@ -110,7 +110,7 @@ const { name, role, avatar, bio, socialLinks, class: className = '' } = Astro.pr
 			class="cosy:object-cover cosy:aspect-square"
 		/>
 	</figure>
-	<div class="cosy:px-6 cosy:py-4 cosy:card-body">
+	<div class="cosy:px-6 cosy:py-4 cosy:card-body cosy:flex cosy:flex-col cosy:items-center">
 		<h2 class="cosy:mb-1 cosy:font-semibold cosy:text-xl cosy:card-title">{name}</h2>
 		<p class="cosy:mb-3 cosy:text-sm cosy:text-base-content/70">{role}</p>
 		<p class="cosy:mb-4 cosy:text-base">{bio}</p>

package/dist/team-member/TeamMemberBasic.astro

@@ -0,0 +1,25 @@
+---
+/**
+ * @component TeamMember.Basic
+ *
+ * @description
+ * 基础的团队成员展示组件示例，展示最简单的成员信息展示方式。
+ */
+import '../style.ts';
+import TeamMember from './TeamMember.astro';
+import { getExampleImage } from '../utils/image';
+
+const avatar = getExampleImage({
+	width: 200,
+	height: 200,
+	provider: 'robohash',
+	randomSeed: 'member1',
+});
+---
+
+<TeamMember
+	name="张三"
+	role="产品设计师"
+	avatar={avatar}
+	bio="专注于用户体验设计，拥有5年产品设计经验"
+/>

package/dist/team-member/TeamMemberCustomStyle.astro

@@ -0,0 +1,26 @@
+---
+/**
+ * @component TeamMember.CustomStyle
+ *
+ * @description
+ * 自定义样式的团队成员展示组件示例，展示如何使用class属性自定义样式。
+ */
+import '../style.ts';
+import TeamMember from './TeamMember.astro';
+import { getExampleImage } from '../utils/image';
+
+const avatar = getExampleImage({
+	width: 200,
+	height: 200,
+	provider: 'robohash',
+	randomSeed: 'member3',
+});
+---
+
+<TeamMember
+	name="王五"
+	role="市场总监"
+	avatar={avatar}
+	bio="负责产品市场策略和品牌推广，拥有丰富的市场营销经验"
+	class="cosy:bg-gradient-to-r cosy:from-purple-100 cosy:to-pink-100 cosy:shadow-lg cosy:w-72"
+/>

package/dist/team-member/TeamMemberGroup.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * @component TeamMember.Group
+ *
+ * @description
+ * 团队成员组展示组件示例，展示如何组合多个团队成员。
+ */
+import '../style.ts';
+import TeamMember from './TeamMember.astro';
+import { getExampleImage } from '../utils/image';
+
+const members = [
+	{
+		name: '张三',
+		title: '产品设计师',
+		avatar: getExampleImage({
+			width: 200,
+			height: 200,
+			provider: 'robohash',
+			randomSeed: 'member1',
+		}),
+		description: '专注于用户体验设计，拥有5年产品设计经验',
+	},
+	{
+		name: '李四',
+		title: '高级开发工程师',
+		avatar: getExampleImage({
+			width: 200,
+			height: 200,
+			provider: 'robohash',
+			randomSeed: 'member2',
+		}),
+		description: '全栈开发专家，热爱开源项目，专注于前端框架和性能优化',
+	},
+	{
+		name: '王五',
+		title: '市场总监',
+		avatar: getExampleImage({
+			width: 200,
+			height: 200,
+			provider: 'robohash',
+			randomSeed: 'member3',
+		}),
+		description: '负责产品市场策略和品牌推广，拥有丰富的市场营销经验',
+	},
+];
+---
+
+<div class="cosy:grid cosy:grid-cols-3 md:cosy:grid-cols-3 cosy:gap-8">
+	{
+		members.map((member) => (
+			<TeamMember
+				name={member.name}
+				role={member.title}
+				avatar={member.avatar}
+				bio={member.description}
+			/>
+		))
+	}
+</div>

package/dist/team-member/TeamMemberWithSocial.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * @component TeamMember.WithSocial
+ *
+ * @description
+ * 带社交媒体链接的团队成员展示组件示例，展示如何添加社交媒体链接。
+ */
+import '../style.ts';
+import TeamMember from './TeamMember.astro';
+import { getExampleImage } from '../utils/image';
+
+const avatar = getExampleImage({
+	width: 200,
+	height: 200,
+	provider: 'robohash',
+	randomSeed: 'member2',
+});
+---
+
+<TeamMember
+	name="李四"
+	role="高级开发工程师"
+	avatar={avatar}
+	bio="全栈开发专家，热爱开源项目，专注于前端框架和性能优化"
+	socialLinks={[
+		{ platform: 'github', url: 'https://github.com' },
+		{ platform: 'twitter', url: 'https://twitter.com' },
+		{ platform: 'linkedin', url: 'https://linkedin.com' },
+	]}
+/>

package/dist/{components/data-display → team-member}/TeamMembers.astro

@@ -30,8 +30,8 @@
  */
 
 import TeamMember from './TeamMember.astro';
-import '../../style.ts';
-import type { ImageSource } from '../../types/image';
+import '../style.ts';
+import type { ImageSource } from '../types/image';
 
 // 自定义图片元数据接口
 interface ImageMetadata {

package/dist/team-member/index.ts

@@ -0,0 +1,23 @@
+import TeamMember from './TeamMember.astro';
+import TeamMemberBasic from './TeamMemberBasic.astro';
+import TeamMemberWithSocial from './TeamMemberWithSocial.astro';
+import TeamMemberCustomStyle from './TeamMemberCustomStyle.astro';
+import TeamMemberGroup from './TeamMemberGroup.astro';
+import TeamMemebrs from './TeamMembers.astro';
+
+import BasicSourceCode from './TeamMemberBasic.astro?raw';
+import WithSocialSourceCode from './TeamMemberWithSocial.astro?raw';
+import CustomStyleSourceCode from './TeamMemberCustomStyle.astro?raw';
+import GroupSourceCode from './TeamMemberGroup.astro?raw';
+
+import { extractSimpleExample } from '../utils/component';
+
+export { TeamMember, TeamMemberBasic, TeamMemberWithSocial, TeamMemberCustomStyle, TeamMemberGroup, TeamMemebrs };
+
+// Export example codes
+export const TeamMemberExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'TeamMember'),
+  WithSocial: extractSimpleExample(WithSocialSourceCode, 'TeamMember'),
+  CustomStyle: extractSimpleExample(CustomStyleSourceCode, 'TeamMember'),
+  Group: extractSimpleExample(GroupSourceCode, 'TeamMember'),
+};

package/dist/{theme-item → theme-switcher}/ThemeItem.astro

@@ -39,7 +39,7 @@ const { theme, label, class: className = '' } = Astro.props;
 	variant="ghost"
 	size="sm"
 	block
-	class={`cosy:text-left cosy:justify-start ${className}`}
-	data-set-theme={theme}>
+	class={`cosy:text-left cosy:justify-start ${className} cosy:theme-item`}
+	data-theme={theme}>
 	{label}
 </Button>

package/dist/theme-switcher/ThemeSwitcher.astro

@@ -25,8 +25,8 @@
  * ```
  */
 
-import Button from '../button/Button.astro';
-import SunCloudyIcon from '../icons/SunCloudyIcon.astro';
+import { SunCloudyIcon } from '../index';
+import ThemeItem from './ThemeItem.astro';
 import '../style.ts';
 
 interface Props {
@@ -51,26 +51,15 @@ const themes = [
 ];
 ---
 
+<!-- 主题切换按钮 -->
 <div class:list={['cosy:dropdown-end cosy:dropdown', className]}>
-	<Button variant="ghost" size="sm" class="cosy:p-1">
-		<SunCloudyIcon class="cosy:w-5 cosy:h-5" slot="icon-left" />
-	</Button>
+	<div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
+		<SunCloudyIcon size="16px" class="cosy:w-4 cosy:h-4" />
+	</div>
 	<ul
-		tabindex="0"
-		class="cosy:bg-slate-900 cosy:dark:bg-slate-800 cosy:shadow-lg cosy:p-2 cosy:rounded-box cosy:w-56 cosy:dropdown-content cosy:menu">
-		{
-			themes.map((theme) => (
-				<li>
-					<button
-						class="cosy:flex cosy:justify-between cosy:items-center cosy:w-full cosy:transition-colors cosy:theme-item"
-						data-theme={theme.id}
-						data-active={false}>
-						<span>{theme.name}</span>
-						<span class="cosy:hidden cosy:text-primary cosy:theme-check">✓</span>
-					</button>
-				</li>
-			))
-		}
+		tabindex={0}
+		class="cosy:dropdown-content cosy:menu cosy:bg-base-100 cosy:dark:bg-neutral-800 cosy:rounded-box cosy:z-[1] cosy:w-56 cosy:p-2 cosy:shadow-lg">
+		{themes.map((theme) => <ThemeItem theme={theme.id} label={theme.name} />)}
 	</ul>
 </div>
 
@@ -103,6 +92,7 @@ const themes = [
 	function initThemeSwitcher() {
 		document.querySelectorAll('.cosy\\:theme-item').forEach((item) => {
 			item.addEventListener('click', () => {
+				console.log('Theme item clicked:', item);
 				const theme = item.getAttribute('data-theme');
 				if (theme) {
 					themeManager.setTheme(theme);

package/dist/types/header.ts

@@ -34,6 +34,30 @@ export interface IHeaderProps {
 	 */
 	navItems?: INavItem[];
 
+	/**
+	 * 导航栏位置
+	 * @default "start"
+	 */
+	navPosition?: 'start' | 'center' | 'end';
+
+	/**
+	 * 水平内边距
+	 * @default "md"
+	 */
+	paddingHorizontal?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
+	/**
+	 * 垂直内边距
+	 * @default "md"
+	 */
+	paddingVertical?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
+	/**
+	 * 圆角大小
+	 * @default "md"
+	 */
+	rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
 	/**
 	 * 是否显示侧边栏切换按钮
 	 * @default false
@@ -41,7 +65,13 @@ export interface IHeaderProps {
 	showSidebarToggle?: boolean;
 
 	/**
-	 * 社交链接
+	 * 是否显示主题切换按钮
+	 * @default false
+	 */
+	showThemeSwitcher?: boolean;
+
+	/**
+	 * 社交媒体链接列表
 	 */
 	socialLinks?: Array<{
 		name: string;
@@ -54,11 +84,4 @@ export interface IHeaderProps {
 	 * @default true
 	 */
 	sticky?: boolean;
-
-	rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-
-	paddingHorizontal?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-	paddingVertical?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-
-	navPosition?: 'start' | 'center' | 'end';
-}
+}