@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/{team-member → src-astro/team-member}/TeamMembers.astro

@@ -30,44 +30,36 @@
  */
 
 import TeamMember from './TeamMember.astro';
-import '../style.ts';
-import type { ImageSource } from '../types/image';
-
-// 自定义图片元数据接口
-interface ImageMetadata {
-	src: string;
-	width: number;
-	height: number;
-	format: string;
-}
+import '../../style.ts';
+import type { ImageSource } from '../types/image.ts';
 
 interface SocialLink {
-	platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
-	url: string;
+  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
+  url: string;
 }
 
 interface TeamMemberData {
-	name: string;
-	role: string;
-	avatar: ImageSource;
-	bio: string;
-	socialLinks?: SocialLink[];
+  name: string;
+  role: string;
+  avatar: ImageSource;
+  bio: string;
+  socialLinks?: SocialLink[];
 }
 
 interface Props {
-	/**
-	 * 团队成员数据数组
-	 */
-	members: TeamMemberData[];
-	/**
-	 * 网格列数
-	 * @default 3
-	 */
-	columns?: 2 | 3 | 4;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
+  /**
+   * 团队成员数据数组
+   */
+  members: TeamMemberData[];
+  /**
+   * 网格列数
+   * @default 3
+   */
+  columns?: 2 | 3 | 4;
+  /**
+   * 自定义类名
+   */
+  class?: string;
 }
 
 const { members, columns = 3, class: className = '' } = Astro.props;
@@ -77,28 +69,28 @@ const columnsValue = columns as 2 | 3 | 4;
 
 // 根据列数生成对应的类名
 const getGridClasses = (cols: 2 | 3 | 4) => {
-	const baseClass = 'cosy:grid-cols-1';
-	const mdClass = 'cosy:md:grid-cols-2';
+  const baseClass = 'cosy:grid-cols-1';
+  const mdClass = 'cosy:md:grid-cols-2';
 
-	let lgClass = 'cosy:lg:grid-cols-3';
-	if (cols === 2) {
-		lgClass = 'cosy:lg:grid-cols-2';
-	} else if (cols === 4) {
-		lgClass = 'cosy:lg:grid-cols-4';
-	}
+  let lgClass = 'cosy:lg:grid-cols-3';
+  if (cols === 2) {
+    lgClass = 'cosy:lg:grid-cols-2';
+  } else if (cols === 4) {
+    lgClass = 'cosy:lg:grid-cols-4';
+  }
 
-	return [baseClass, mdClass, lgClass];
+  return [baseClass, mdClass, lgClass];
 };
 ---
 
 <div class:list={['cosy:w-full cosy:mx-auto cosy:px-4', className]}>
-	<div class:list={['cosy:grid cosy:gap-6', ...getGridClasses(columnsValue)]}>
-		{
-			members.map((member: TeamMemberData) => (
-				<div class="cosy:transition-all cosy:hover:-translate-y-1 cosy:duration-300 cosy:transform">
-					<TeamMember {...member} />
-				</div>
-			))
-		}
-	</div>
+  <div class:list={['cosy:grid cosy:gap-6', ...getGridClasses(columnsValue)]}>
+    {
+      members.map((member: TeamMemberData) => (
+        <div class="cosy:transition-all cosy:hover:-translate-y-1 cosy:duration-300 cosy:transform">
+          <TeamMember {...member} />
+        </div>
+      ))
+    }
+  </div>
 </div>

package/dist/{team-member → src-astro/team-member}/index.ts

@@ -12,7 +12,14 @@ import GroupSourceCode from './TeamMemberGroup.astro?raw';
 
 import { extractSimpleExample } from '../utils/component';
 
-export { TeamMember, TeamMemberBasic, TeamMemberWithSocial, TeamMemberCustomStyle, TeamMemberGroup, TeamMemebrs };
+export {
+  TeamMember,
+  TeamMemberBasic,
+  TeamMemberWithSocial,
+  TeamMemberCustomStyle,
+  TeamMemberGroup,
+  TeamMemebrs,
+};
 
 // Export example codes
 export const TeamMemberExampleCodes = {
@@ -20,4 +27,4 @@ export const TeamMemberExampleCodes = {
   WithSocial: extractSimpleExample(WithSocialSourceCode, 'TeamMember'),
   CustomStyle: extractSimpleExample(CustomStyleSourceCode, 'TeamMember'),
   Group: extractSimpleExample(GroupSourceCode, 'TeamMember'),
-};
+};

package/dist/{text → src-astro/text}/Text.astro

@@ -95,68 +95,68 @@
  * - 确保文本颜色与背景色的对比度符合WCAG标准
  */
 
-import '../style.ts';
+import '../../style.ts';
 
 export interface Props {
-	as?: string;
-	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
-	color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
-	align?: 'left' | 'center' | 'right' | 'justify';
-	italic?: boolean;
-	underline?: boolean;
-	truncate?: boolean;
-	class?: string;
+  as?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
+  align?: 'left' | 'center' | 'right' | 'justify';
+  italic?: boolean;
+  underline?: boolean;
+  truncate?: boolean;
+  class?: string;
 }
 
 const {
-	as: Element = 'p',
-	size = 'md',
-	weight = 'normal',
-	color = 'default',
-	align = 'left',
-	italic = false,
-	underline = false,
-	truncate = false,
-	class: className = '',
+  as: Element = 'p',
+  size = 'md',
+  weight = 'normal',
+  color = 'default',
+  align = 'left',
+  italic = false,
+  underline = false,
+  truncate = false,
+  class: className = '',
 } = Astro.props;
 
 // 根据大小设置样式
 const sizeClasses = {
-	xs: 'cosy:text-xs',
-	sm: 'cosy:text-sm',
-	md: 'cosy:text-base',
-	lg: 'cosy:text-lg',
-	xl: 'cosy:text-xl',
+  xs: 'cosy:text-xs',
+  sm: 'cosy:text-sm',
+  md: 'cosy:text-base',
+  lg: 'cosy:text-lg',
+  xl: 'cosy:text-xl',
 };
 const sizeClass = sizeClasses[size as keyof typeof sizeClasses];
 
 // 根据粗细设置样式
 const weightClasses = {
-	light: 'cosy:font-light',
-	normal: 'cosy:font-normal',
-	medium: 'cosy:font-medium',
-	semibold: 'cosy:font-semibold',
-	bold: 'cosy:font-bold',
+  light: 'cosy:font-light',
+  normal: 'cosy:font-normal',
+  medium: 'cosy:font-medium',
+  semibold: 'cosy:font-semibold',
+  bold: 'cosy:font-bold',
 };
 const weightClass = weightClasses[weight as keyof typeof weightClasses];
 
 // 根据颜色设置样式
 const colorClasses = {
-	default: 'cosy:text-gray-900 cosy:dark:text-gray-100',
-	primary: 'cosy:text-primary-600 cosy:dark:text-primary-400',
-	secondary: 'cosy:text-secondary-600 cosy:dark:text-secondary-400',
-	accent: 'cosy:text-accent-600 cosy:dark:text-accent-400',
-	muted: 'cosy:text-gray-600 cosy:dark:text-gray-400',
+  default: 'cosy:text-gray-900 cosy:dark:text-gray-100',
+  primary: 'cosy:text-primary-600 cosy:dark:text-primary-400',
+  secondary: 'cosy:text-secondary-600 cosy:dark:text-secondary-400',
+  accent: 'cosy:text-accent-600 cosy:dark:text-accent-400',
+  muted: 'cosy:text-gray-600 cosy:dark:text-gray-400',
 };
 const colorClass = colorClasses[color as keyof typeof colorClasses];
 
 // 根据对齐方式设置样式
 const alignClasses = {
-	left: 'cosy:text-left',
-	center: 'cosy:text-center',
-	right: 'cosy:text-right',
-	justify: 'cosy:text-justify',
+  left: 'cosy:text-left',
+  center: 'cosy:text-center',
+  right: 'cosy:text-right',
+  justify: 'cosy:text-justify',
 };
 const alignClass = alignClasses[align as keyof typeof alignClasses];
 
@@ -170,20 +170,20 @@ const combinedClass = `text ${sizeClass} ${weightClass} ${colorClass} ${alignCla
 ---
 
 <Element class={combinedClass}>
-	<slot />
+  <slot />
 </Element>
 
 <style>
-	.text {
-		margin-bottom: 1em;
-		line-height: 1.5;
-	}
+  .text {
+    margin-bottom: 1em;
+    line-height: 1.5;
+  }
 
-	/* 确保截断文本正常工作 */
-	.truncate {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 100%;
-	}
+  /* 确保截断文本正常工作 */
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
 </style>

package/dist/{text → src-astro/text}/TextBasic.astro

@@ -8,5 +8,5 @@ import Text from './Text.astro';
 <Text size="lg" align="center" underline>居中大号带下划线文本</Text>
 <Text size="md" weight="light" color="muted">中号柔和色细体文本</Text>
 <Text truncate style="max-width: 120px; display: block;"
-	>这是一段很长的文本，将会被截断并显示省略号...</Text
+  >这是一段很长的文本，将会被截断并显示省略号...</Text
 >

package/dist/src-astro/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 → src-astro/text}/index.ts

@@ -7,5 +7,5 @@ export { Text, TextBasic };
 
 // 导出示例源代码
 export const TextExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Text'),
+  Basic: extractSimpleExample(BasicSourceCode, 'Text'),
 };

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

@@ -14,32 +14,32 @@
  * ```
  */
 
-import { Button } from '../index';
-import '../style.ts';
+import { Button } from '../../index-astro';
+import '../../style.ts';
 
 interface Props {
-	/**
-	 * 主题名称
-	 */
-	theme: string;
-	/**
-	 * 显示的标签文本
-	 */
-	label: string;
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
+  /**
+   * 主题名称
+   */
+  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} cosy:theme-item`}
-	data-theme={theme}>
-	{label}
+  variant="ghost"
+  size="sm"
+  block
+  class={`cosy:text-left cosy:justify-start ${className} cosy:theme-item`}
+  data-theme={theme}>
+  {label}
 </Button>

package/dist/src-astro/theme-switcher/ThemeSwitcher.astro

@@ -0,0 +1,121 @@
+---
+/**
+ * @component ThemeSwitcher
+ *
+ * @description
+ * ThemeSwitcher 组件提供一个主题切换下拉菜单，允许用户在多个预定义主题之间切换。
+ * 组件会记住用户的主题选择，并在页面重新加载或访问网站的其他页面时保持该主题。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简洁直观 - 使用图标按钮和下拉菜单提供清晰的交互方式
+ * 2. 主题持久化 - 使用本地存储记住用户的主题选择
+ * 3. 无缝集成 - 与 DaisyUI 主题系统无缝集成
+ * 4. 广泛兼容 - 支持多种主题选项，适应不同的视觉偏好
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ThemeSwitcher />
+ * ```
+ *
+ * 自定义样式：
+ * ```astro
+ * <ThemeSwitcher class="cosy:top-4 cosy:right-4 cosy:fixed" />
+ * ```
+ */
+
+import { SunCloudyIcon } from '../../index-astro';
+import ThemeItem from './ThemeItem.astro';
+import '../../style.ts';
+
+interface Props {
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+
+const themes = [
+  { id: 'default', name: 'Default' },
+  { id: 'light', name: 'Light' },
+  { id: 'dark', name: 'Dark' },
+  { id: 'pastel', name: 'Pastel' },
+  { id: 'lemonade', name: 'Lemonade' },
+  { id: 'cupcake', name: 'Cupcake' },
+  { id: 'nord', name: 'Nord' },
+  { id: 'business', name: 'Business' },
+  { id: 'luxury', name: 'Luxury' },
+];
+---
+
+<!-- 主题切换按钮 -->
+<div class:list={['cosy:dropdown-end cosy:dropdown', className]}>
+  <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: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>
+
+<script>
+  import { createThemeManager } from '../utils/theme';
+
+  const themeManager = createThemeManager();
+
+  function updateActiveTheme() {
+    const currentTheme =
+      document.documentElement.getAttribute('data-theme') || 'default';
+    document.querySelectorAll('.cosy\\:theme-item').forEach((item) => {
+      const isActive = item.getAttribute('data-theme') === currentTheme;
+      item.setAttribute('data-active', String(isActive));
+
+      // 更新视觉状态
+      const checkmark = item.querySelector('.cosy\\:theme-check');
+      if (checkmark) {
+        if (isActive) {
+          checkmark.classList.remove('cosy:hidden');
+          item.classList.add('cosy:bg-base-200', 'cosy:font-medium');
+        } else {
+          checkmark.classList.add('cosy:hidden');
+          item.classList.remove('cosy:bg-base-200', 'cosy:font-medium');
+        }
+      }
+    });
+  }
+
+  // 初始化主题切换按钮
+  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);
+          updateActiveTheme();
+        }
+      });
+    });
+  }
+
+  // 初始加载时初始化
+  function initialize() {
+    themeManager.initialize();
+    initThemeSwitcher();
+    updateActiveTheme();
+  }
+
+  // 初始化
+  document.addEventListener('DOMContentLoaded', initialize);
+
+  // Astro view transitions 后重新初始化
+  document.addEventListener('astro:after-swap', initialize);
+
+  // 确保脚本加载后立即初始化
+  initialize();
+</script>

package/dist/{theme-switcher → src-astro/theme-switcher}/ThemeSwitcherBasic.astro

@@ -3,5 +3,5 @@ import ThemeSwitcher from './ThemeSwitcher.astro';
 ---
 
 <div class="cosy:flex cosy:justify-center">
-	<ThemeSwitcher />
+  <ThemeSwitcher />
 </div>

package/dist/{theme-switcher → src-astro/theme-switcher}/index.ts

@@ -7,5 +7,5 @@ export { ThemeSwitcher, ThemeSwitcherBasic };
 
 // 导出示例源代码
 export const ThemeSwitcherExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'ThemeSwitcher'),
+  Basic: extractSimpleExample(BasicSourceCode, 'ThemeSwitcher'),
 };