@coffic/cosy-ui 0.9.85 → 0.9.87

package/dist/src-astro/grid/Grid.astro

@@ -393,12 +393,12 @@ const getColsClasses = (cols: ResponsiveValue<number>) => {
 // 间距映射 - 使用 class builder
 const getGapClass = (gap: GapSize) => {
     const gapMap = {
-        none: cn().add('cosy:gap-0').build(),
-        xs: cn().add('cosy:gap-2').build(),
-        sm: cn().add('cosy:gap-4').build(),
-        md: cn().add('cosy:gap-6').build(),
-        lg: cn().add('cosy:gap-8').build(),
-        xl: cn().add('cosy:gap-12').build(),
+        none: cn().gap(0).build(),
+        xs: cn().gap(2).build(),
+        sm: cn().gap(4).build(),
+        md: cn().gap(6).build(),
+        lg: cn().gap(8).build(),
+        xl: cn().gap(12).build(),
     };
     return gapMap[gap];
 };
@@ -432,12 +432,12 @@ const getColGapClass = (gap: GapSize) => {
 // 垂直外边距映射 - 使用 class builder
 const getMarginYClass = (gap: GapSize) => {
     const marginYMap = {
-        none: cn().add('cosy:my-0').build(),
-        xs: cn().add('cosy:my-2').build(),
-        sm: cn().add('cosy:my-4').build(),
-        md: cn().add('cosy:my-6').build(),
-        lg: cn().add('cosy:my-8').build(),
-        xl: cn().add('cosy:my-12').build(),
+        none: cn().my(0).build(),
+        xs: cn().my(2).build(),
+        sm: cn().my(4).build(),
+        md: cn().my(6).build(),
+        lg: cn().my(8).build(),
+        xl: cn().my(12).build(),
     };
     return marginYMap[gap];
 };
@@ -447,20 +447,23 @@ const backgroundClass = getBackgroundClass(background as BackgroundColor);
 
 // 使用 classBuilder 构建最终类名
 const gridClass = cn()
-    .add('cosy:grid')
-    .add(getColsClasses(cols))
+    .grid()
+    .add(getColsClasses(cols)) // 保留：动态类名
     .add(
         rowGap
-            ? getRowGapClass(rowGap as GapSize)
+            ? getRowGapClass(rowGap as GapSize) // 保留：row-gap 暂不支持
             : colGap
               ? getGapClass(gap as GapSize)
               : getGapClass(gap as GapSize),
     )
-    .add(colGap ? getColGapClass(colGap as GapSize) : '')
+    .add(colGap ? getColGapClass(colGap as GapSize) : '') // 保留：col-gap 暂不支持
     .add(marginY ? getMarginYClass(marginY as GapSize) : '')
-    .add(border ? 'cosy:border cosy:rounded-lg' : '')
-    .add(backgroundClass)
-    .add(className)
+    .add(border ? (() => {
+        const borderBuilder = cn().border().rounded('lg');
+        return borderBuilder.build();
+    })() : '')
+    .add(backgroundClass) // 保留：动态类名
+    .add(className) // 保留：用户自定义类名
     .build();
 ---
 

package/dist/src-astro/heading/Heading.astro

@@ -1,9 +1,4 @@
 ---
-
-
-
-
-
 /**
  * @component Heading
  *
@@ -107,7 +102,10 @@ const combinedClass = getHeadingCombinedClassesAstro(props);
 
 // 使用 class builder 构建链接类名
 const linkClass = props.href
-    ? cn().add('cosy:hover:opacity-80', 'cosy:transition-opacity').build()
+    ? cn()
+        .add('cosy:hover:opacity-80') // 保留：伪类状态
+        .transition('opacity')
+        .build()
     : '';
 ---
 

package/dist/src-astro/hero/HeroContent.astro

@@ -1,9 +1,4 @@
 ---
-
-
-
-
-
 /**
  * @component HeroContent
  * @description Hero 组件的主要内容布局容器
@@ -61,10 +56,10 @@ const {
 // 内容布局类
 const contentClass = cn()
     .flex(imagePosition === 'top' || imagePosition === 'bottom' ? 'col' : 'col')
-    .add('cosy:lg:flex-row')
+    .add('cosy:lg:flex-row') // 保留：响应式类名
     .add(
         align === 'center'
-            ? 'cosy:text-center cosy:items-center'
+            ? 'cosy:text-center cosy:items-center' // 保留：动态对齐
             : align === 'left'
               ? 'cosy:text-left cosy:items-start'
               : 'cosy:text-right cosy:items-end'
@@ -72,12 +67,12 @@ const contentClass = cn()
     .w('full')
     .mx('auto')
     .gap(10)
-    .add('cosy:lg:gap-16')
+    .add('cosy:lg:gap-16') // 保留：响应式类名
     .z(10)
     .relative()
     .py(16)
     .px(4)
-    .add('cosy:sm:px-6', 'cosy:lg:px-8')
+    .add('cosy:sm:px-6', 'cosy:lg:px-8') // 保留：响应式类名
     .build();
 
 // 内容顺序类映射

package/dist/src-astro/hero/HeroImage.astro

@@ -1,9 +1,4 @@
 ---
-
-
-
-
-
 /**
  * @component HeroImage
  * @description Hero 组件的图片展示部分
@@ -33,18 +28,23 @@ const { image, imagePosition } = Astro.props as Props;
 
 // 图片样式类
 const imageClasses = cn()
+    .rounded('lg')
+    .shadow('2xl')
+    .transitionAll()
+    .duration(300)
+    .add(
+        'cosy:hover:scale-105', // 保留：伪类状态
+        'cosy:hover:shadow-primary/20' // 保留：伪类状态和复杂阴影
+    )
     .add(
-        'cosy:rounded-lg',
-        'cosy:shadow-2xl',
-        'cosy:transition-all',
-        'cosy:duration-300',
-        'cosy:hover:scale-105',
-        'cosy:hover:shadow-primary/20'
+        imagePosition === 'top' || imagePosition === 'bottom'
+            ? 'cosy:max-w-lg' // 保留：响应式类名
+            : 'cosy:max-w-sm cosy:lg:max-w-md' // 保留：响应式类名
     )
     .add(
         imagePosition === 'top' || imagePosition === 'bottom'
-            ? 'cosy:max-w-lg cosy:w-full'
-            : 'cosy:max-w-sm cosy:lg:max-w-md'
+            ? 'cosy:w-full'
+            : ''
     )
     .build();
 

package/dist/src-astro/hero/HeroOverlay.astro

@@ -25,10 +25,11 @@ const safeOpacity = Math.max(0, Math.min(1, overlayOpacity));
 
 // 遮罩层类名
 const overlayClass = cn()
-    .add('cosy:absolute')
+    .absolute()
     .inset(0)
     .z(0)
-    .add('cosy:m-0', 'cosy:p-0')
+    .m(0)
+    .p(0)
     .build();
 
 // 创建遮罩样式对象

package/dist/src-astro/hero/HeroTextContent.astro

@@ -102,18 +102,23 @@ const titleClass = cn()
     .build();
 
 // 描述样式
-const descriptionClass = cn()
-    .add('cosy:text-xl', 'cosy:prose', 'cosy:max-w-3xl', 'cosy:mb-8')
-    .add(
-        glassmorphism && textBackground === 'solid'
-            ? 'cosy:text-gray-700'
-            : hasBackgroundImage &&
-                (backgroundOverlay === 'dark' ||
-                    backgroundOverlay === 'gradient')
-              ? 'cosy:text-white cosy:opacity-90'
-              : 'cosy:opacity-80'
-    )
-    .build();
+const descriptionClassBuilder = cn()
+    .text('xl')
+    .add('cosy:prose', 'cosy:max-w-3xl') // 保留：prose 和响应式类名
+    .mb(8);
+
+if (glassmorphism && textBackground === 'solid') {
+    descriptionClassBuilder.add('cosy:text-gray-700'); // 保留：复杂颜色
+} else if (
+    hasBackgroundImage &&
+    (backgroundOverlay === 'dark' || backgroundOverlay === 'gradient')
+) {
+    descriptionClassBuilder.color('white').add('cosy:opacity-90'); // 保留：复杂透明度
+} else {
+    descriptionClassBuilder.add('cosy:opacity-80'); // 保留：复杂透明度
+}
+
+const descriptionClass = descriptionClassBuilder.build();
 
 // 链接容器样式
 const linksContainerClass = cn()

package/dist/src-astro/image/Image.astro

@@ -279,17 +279,26 @@ const localProps = {
 };
 
 // 使用 classBuilder 构建容器类名
-const containerClass = cn()
+const containerBuilder = cn()
     .add('not-prose')
     .flex()
     .items('center')
     .justify('center')
-    .add('cosy:align-middle', 'cosy:mx-auto', 'cosy:my-auto')
-    .add(asBackground ? 'cosy:absolute' : 'cosy:relative')
-    .add(asBackground ? '' : 'cosy:w-full', asBackground ? '' : 'cosy:h-full')
-    .inset(asBackground ? 0 : (undefined as any))
-    .add(previewEnabled ? 'cosy:cursor-zoom-in' : '')
-    .build();
+    .add('cosy:align-middle') // 保留：需要扩展对齐方法
+    .mx('auto')
+    .my('auto');
+
+if (asBackground) {
+    containerBuilder.absolute().inset(0);
+} else {
+    containerBuilder.relative().w('full').h('full');
+}
+
+if (previewEnabled) {
+    containerBuilder.cursorZoomIn();
+}
+
+const containerClass = containerBuilder.build();
 ---
 
 <div

package/dist/src-astro/image/ImagePlaceholder.astro

@@ -1,9 +1,4 @@
 ---
-
-
-
-
-
 /**
  * @component ImagePlaceholder
  * @description 图片加载占位图组件

package/dist/src-astro/image/RemoteImage.astro

@@ -1,9 +1,4 @@
 ---
-
-
-
-
-
 /**
  * @component RemoteImage
  *

package/dist/src-astro/image/types.d.ts

@@ -152,4 +152,3 @@ export interface IImagePropsBuilder {
     /** 构建并返回完整 Props */
     build(): IImageProps;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/src-astro/image/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/dist/src-astro/language-switcher/LanguageSwitcher.astro

@@ -1,4 +1,6 @@
 ---
+
+
 /**
  * @component LanguageSwitcher
  *
@@ -11,10 +13,10 @@
  * - class - 自定义CSS类名
  */
 
+import { cn } from '../../src/class';
 import { ChevronDownIcon, GlobeIcon } from '../icons';
 import { Link } from '../link';
 import { ListItem } from '../list';
-import { cn } from '../../src/class';
 import {
     checkSwitcherRenderState,
     generateSwitcherLinks,
@@ -69,24 +71,32 @@ const dropdownClass = cn()
     .build();
 
 const buttonClass = cn()
-    .add('cosy:btn', 'cosy:btn-ghost')
+    .add('cosy:btn', 'cosy:btn-ghost') // 保留：DaisyUI 组件类名
     .build();
 
 const iconClass = cn()
-    .add('cosy:w-4', 'cosy:h-4', 'cosy:mr-1')
+    .w(4)
+    .h(4)
+    .mr(1)
     .build();
 
 const spanClass = cn()
-    .add('cosy:mr-1', 'cosy:hidden', 'cosy:sm:inline')
+    .mr(1)
+    .hidden()
+    .add('cosy:sm:inline') // 保留：响应式类名
     .build();
 
 const chevronClass = cn()
-    .add('cosy:w-4', 'cosy:h-4')
+    .w(4)
+    .h(4)
     .build();
 
 const ulClass = cn()
-    .add('cosy:z-1', 'cosy:bg-base-100', 'cosy:shadow', 'cosy:p-2')
-    .add('cosy:rounded-box', 'cosy:w-32', 'cosy:dropdown-content', 'cosy:menu')
+    .z(1)
+    .bg('base-100')
+    .shadow()
+    .p(2)
+    .add('cosy:rounded-box', 'cosy:w-32', 'cosy:dropdown-content', 'cosy:menu') // 保留：DaisyUI 组件类名
     .build();
 ---
 

package/dist/src-astro/layout-app/AppLayoutMainContent.astro

@@ -40,12 +40,15 @@ interface Props {
 const { loadingDelay = 100, mainContentConfig = {} } = Astro.props as Props;
 
 // 主内容区域类
-const mainContentClass = cn().add('cosy:flex-1', 'cosy:min-w-xs').build();
+const mainContentClass = cn()
+    .flex1()
+    .add('cosy:min-w-xs') // 保留：需要扩展 SizeBuilder 支持 min-w-xs
+    .build();
 
 // 骨架屏类
 const skeletonClass = cn()
     .w('full')
-    .add('cosy:h-screen')
+    .add('cosy:h-screen') // 保留：需要扩展 SizeBuilder 支持 h-screen
     .flex('row')
     .items('center')
     .justify('center')

package/dist/src-astro/layout-basic/BaseLayoutHtml.astro

@@ -1,9 +1,4 @@
 ---
-
-
-
-
-
 /**
  * @component BaseLayoutHtml
  * @description BaseLayout 的 HTML 结构子组件，处理完整的 HTML 文档结构

package/dist/src-astro/loading-overlay/LoadingOverlay.astro

@@ -55,21 +55,26 @@ const {
 const overlayId = `loading-overlay`;
 
 // 使用 classBuilder 构建 overlay 类名
-const overlayClass = cn()
+const overlayBuilder = cn()
     .fixed()
     .inset(0)
-    .z(50)
-    .add(showBackdrop ? 'cosy:bg-black/50 cosy:backdrop-blur-sm' : '')
+    .z(50);
+
+if (showBackdrop) {
+    overlayBuilder.add('cosy:bg-black/50').backdropBlur('sm'); // 保留：复杂颜色
+}
+
+overlayBuilder
     .flex()
     .items('center')
     .justify('center')
-    .add(
-        'cosy:opacity-0',
-        'cosy:pointer-events-none',
-        'cosy:transition-opacity',
-        'cosy:duration-300'
-    )
-    .add(className || '')
+    .opacity0()
+    .pointerEvents('none')
+    .transition('opacity')
+    .duration(300);
+
+const overlayClass = overlayBuilder
+    .add(className || '') // 保留：用户自定义类名
     .build();
 ---
 

package/dist/src-astro/login/Login.astro

@@ -1,9 +1,4 @@
 ---
-
-
-
-
-
 /**
  * @component Login
  *
@@ -66,6 +61,8 @@
  * @slot socialButtons - 自定义社交登录按钮
  */
 
+import { cn } from '../../src/class';
+import { LoginFacade } from '../../src/components/login';
 import ChartIcon from '../icons/ChartIcon.astro';
 import GithubIcon from '../icons/GithubIcon.astro';
 
@@ -101,6 +98,23 @@ const {
     dividerText = '或',
 } = Astro.props;
 
+// 使用共用代码获取类名
+const classes = LoginFacade.getLoginClasses({
+    title,
+    subtitle,
+    logo,
+    socialLogins,
+    showRememberMe,
+    showForgotPassword,
+    customClass,
+    loginButtonText,
+    usernameLabel,
+    passwordLabel,
+    forgotPasswordText,
+    rememberMeText,
+    dividerText,
+});
+
 // 社交登录图标映射
 const socialIcons: Record<'github' | 'google' | 'wechat', any> = {
     github: GithubIcon,
@@ -108,37 +122,32 @@ const socialIcons: Record<'github' | 'google' | 'wechat', any> = {
     wechat: ChartIcon,
 };
 
-// 社交登录按钮样式映射
-const socialButtonStyles: Record<'github' | 'google' | 'wechat', string> = {
-    github: 'cosy:bg-gray-800 cosy:hover:bg-gray-900',
-    google: 'cosy:bg-red-500 cosy:hover:bg-red-600',
-    wechat: 'cosy:bg-green-500 cosy:hover:bg-green-600',
+// 获取社交登录按钮类名
+const getSocialButtonClass = (provider: 'github' | 'google' | 'wechat') => {
+    return LoginFacade.getSocialButtonClass(provider);
 };
 ---
 
-<div
-    class={`cosy:min-h-screen cosy:flex cosy:items-center cosy:justify-center cosy:bg-base-200 cosy:py-12 cosy:px-4 cosy:sm:px-6 cosy:lg:px-8 ${customClass}`}>
-    <div
-        class="cosy:max-w-md cosy:w-full cosy:space-y-8 cosy:bg-base-100 cosy:p-8 cosy:rounded-lg cosy:shadow-xl">
+<div class={cn().add(classes.container).add(customClass).build()}>
+    <div class={classes.card}>
         <!-- 头部区域 -->
-        <div class="cosy:text-center">
+        <div class={classes.header}>
             <slot name="header">
                 {
                     logo && (
                         <img
-                            class="cosy:mx-auto cosy:h-12 cosy:w-auto"
+                            class={classes.logo}
                             src={logo}
                             alt="Logo"
                         />
                     )
                 }
-                <h2
-                    class="cosy:mt-6 cosy:text-3xl cosy:font-extrabold cosy:text-base-content">
+                <h2 class={classes.title}>
                     {title}
                 </h2>
                 {
                     subtitle && (
-                        <p class="cosy:mt-2 cosy:text-sm cosy:text-base-content/60">
+                        <p class={classes.subtitle}>
                             {subtitle}
                         </p>
                     )
@@ -147,10 +156,10 @@ const socialButtonStyles: Record<'github' | 'google' | 'wechat', string> = {
         </div>
 
         <!-- 登录表单 -->
-        <form class="cosy:mt-8 cosy:space-y-6">
-            <div class="cosy:rounded-md cosy:shadow-sm cosy:-space-y-px">
+        <form class={classes.form}>
+            <div class={classes.inputGroup}>
                 <div>
-                    <label for="username" class="cosy:sr-only"
+                    <label for="username" class={cn().add('cosy:sr-only').build()}
                         >{usernameLabel}</label
                     >
                     <input
@@ -158,12 +167,12 @@ const socialButtonStyles: Record<'github' | 'google' | 'wechat', string> = {
                         name="username"
                         type="text"
                         required
-                        class="cosy:appearance-none cosy:rounded-none cosy:rounded-t-md cosy:relative cosy:block cosy:w-full cosy:px-3 cosy:py-2 cosy:border cosy:border-base-300 cosy:placeholder-base-content/40 cosy:text-base-content focus:cosy:z-10 focus:cosy:border-primary focus:cosy:outline-none focus:cosy:ring-1 focus:cosy:ring-primary"
+                        class={classes.usernameInput}
                         placeholder={usernameLabel}
                     />
                 </div>
                 <div>
-                    <label for="password" class="cosy:sr-only"
+                    <label for="password" class={cn().add('cosy:sr-only').build()}
                         >{passwordLabel}</label
                     >
                     <input
@@ -171,25 +180,25 @@ const socialButtonStyles: Record<'github' | 'google' | 'wechat', string> = {
                         name="password"
                         type="password"
                         required
-                        class="cosy:appearance-none cosy:rounded-none cosy:rounded-b-md cosy:relative cosy:block cosy:w-full cosy:px-3 cosy:py-2 cosy:border cosy:border-base-300 cosy:placeholder-base-content/40 cosy:text-base-content focus:cosy:z-10 focus:cosy:border-primary focus:cosy:outline-none focus:cosy:ring-1 focus:cosy:ring-primary"
+                        class={classes.passwordInput}
                         placeholder={passwordLabel}
                     />
                 </div>
             </div>
 
-            <div class="cosy:flex cosy:items-center cosy:justify-between">
+            <div class={classes.options}>
                 {
                     showRememberMe && (
-                        <div class="cosy:flex cosy:items-center">
+                        <div class={classes.rememberMe}>
                             <input
                                 id="remember-me"
                                 name="remember-me"
                                 type="checkbox"
-                                class="cosy:h-4 cosy:w-4 cosy:text-primary cosy:focus:ring-primary cosy:border-base-300 cosy:rounded"
+                                class={classes.checkbox}
                             />
                             <label
                                 for="remember-me"
-                                class="cosy:ml-2 cosy:block cosy:text-sm cosy:text-base-content">
+                                class={classes.rememberMeLabel}>
                                 {rememberMeText}
                             </label>
                         </div>
@@ -198,10 +207,10 @@ const socialButtonStyles: Record<'github' | 'google' | 'wechat', string> = {
 
                 {
                     showForgotPassword && (
-                        <div class="cosy:text-sm">
+                        <div class={classes.forgotPassword}>
                             <a
                                 href="#"
-                                class="cosy:font-medium cosy:text-primary cosy:hover:text-primary-focus">
+                                class={classes.forgotPasswordLink}>
                                 {forgotPasswordText}
                             </a>
                         </div>
@@ -212,7 +221,7 @@ const socialButtonStyles: Record<'github' | 'google' | 'wechat', string> = {
             <div>
                 <button
                     type="submit"
-                    class="cosy:group cosy:relative cosy:w-full cosy:flex cosy:justify-center cosy:py-2 cosy:px-4 cosy:border cosy:border-transparent cosy:text-sm cosy:font-medium cosy:rounded-md cosy:text-white cosy:bg-primary cosy:hover:bg-primary-focus focus:cosy:outline-none focus:cosy:ring-2 focus:cosy:ring-offset-2 focus:cosy:ring-primary">
+                    class={classes.submitButton}>
                     {loginButtonText}
                 </button>
             </div>
@@ -221,28 +230,32 @@ const socialButtonStyles: Record<'github' | 'google' | 'wechat', string> = {
         <!-- 社交登录 -->
         {
             socialLogins.length > 0 && (
-                <div class="cosy:mt-6">
-                    <div class="cosy:relative">
-                        <div class="cosy:absolute cosy:inset-0 cosy:flex cosy:items-center">
-                            <div class="cosy:w-full cosy:border-t cosy:border-base-300" />
+                <div class={classes.socialSection}>
+                    <div class={classes.divider}>
+                        <div class={classes.dividerLine}>
+                            <div class={classes.dividerBorder} />
                         </div>
-                        <div class="cosy:relative cosy:flex cosy:justify-center cosy:text-sm">
-                            <span class="cosy:px-2 cosy:bg-base-100 cosy:text-base-content/60">
+                        <div class={classes.dividerTextContainer}>
+                            <span class={classes.dividerText}>
                                 {dividerText}
                             </span>
                         </div>
                     </div>
 
                     <slot name="socialButtons">
-                        <div class="cosy:mt-6 cosy:grid cosy:grid-cols-{Math.min(socialLogins.length, 3)} cosy:gap-3">
+                        <div
+                            class={cn()
+                                .add(classes.socialButtons)
+                                .add(`cosy:grid-cols-${Math.min(socialLogins.length, 3)}`)
+                                .build()}>
                             {socialLogins.map((provider) => {
                                 const Icon = socialIcons[provider];
                                 return (
                                     <div>
                                         <a
                                             href="#"
-                                            class={`cosy:w-full cosy:inline-flex cosy:justify-center cosy:py-2 cosy:px-4 cosy:rounded-md cosy:shadow-sm cosy:text-sm cosy:font-medium cosy:text-white ${socialButtonStyles[provider]}`}>
-                                            <Icon class="cosy:w-5 cosy:h-5" />
+                                            class={getSocialButtonClass(provider)}>
+                                            <Icon class={cn().w(5).h(5).build()} />
                                         </a>
                                     </div>
                                 );