@windrun-huaiin/third-ui 14.0.0 → 14.0.2

package/src/main/delayed-img.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import Image, { type ImageProps } from "next/image"
+import { useEffect, useState } from "react"
+import { themeBgColor, themeViaColor } from "@windrun-huaiin/base-ui/lib"
+import { cn } from "@windrun-huaiin/lib/utils"
+
+interface DelayedImgProps extends ImageProps {
+  wrapperClassName?: string
+  placeholderClassName?: string
+}
+
+const ENV_DELAY_ENABLED =
+  process.env.NEXT_PUBLIC_DELAYED_IMG_ENABLED === "true" ||
+  process.env.NEXT_PUBLIC_DELAY_REVEAL_ENABLED === "true"
+
+const rawDelaySeconds =
+  process.env.NEXT_PUBLIC_DELAYED_IMG_SECONDS ??
+  process.env.NEXT_PUBLIC_DELAY_REVEAL_SECONDS ??
+  "0"
+
+const parsedDelaySeconds = Number(rawDelaySeconds)
+const ENV_DELAY_MS = Number.isFinite(parsedDelaySeconds) && parsedDelaySeconds > 0
+  ? parsedDelaySeconds * 1000
+  : 0
+
+export function DelayedImg({
+  alt,
+  wrapperClassName,
+  placeholderClassName,
+  className,
+  onLoad,
+  ...imageProps
+}: DelayedImgProps) {
+  const shouldDelay = ENV_DELAY_ENABLED && ENV_DELAY_MS > 0
+  const [isMounted, setIsMounted] = useState(!shouldDelay)
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  useEffect(() => {
+    if (!shouldDelay || isMounted) {
+      return
+    }
+
+    const timer = window.setTimeout(() => {
+      setIsMounted(true)
+    }, ENV_DELAY_MS)
+
+    return () => window.clearTimeout(timer)
+  }, [isMounted, shouldDelay])
+
+  return (
+    <div className={cn("relative", wrapperClassName)}>
+      {(!isMounted || !isLoaded) && (
+        <div
+          aria-hidden="true"
+          className={cn(
+            "absolute inset-0 rounded-[inherit] border animate-pulse shadow-sm bg-white/70 dark:bg-white/5",
+            themeBgColor,
+            placeholderClassName,
+          )}
+        >
+          <div
+            className={cn(
+              "absolute inset-x-0 top-0 h-28 rounded-[inherit] bg-linear-to-b from-white/80 to-transparent dark:from-white/14 dark:to-transparent",
+              themeViaColor,
+            )}
+          />
+          <div className="absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" />
+        </div>
+      )}
+      {isMounted && (
+        <Image
+          {...imageProps}
+          alt={alt}
+          onLoad={(event) => {
+            setIsLoaded(true)
+            onLoad?.(event)
+          }}
+          className={cn(
+            "transition duration-300",
+            isLoaded ? "opacity-100" : "opacity-0",
+            className,
+          )}
+        />
+      )}
+    </div>
+  )
+}

package/src/main/features.tsx

@@ -61,7 +61,7 @@ export async function Features({
             <div
               key={feature.id}
               data-feature-id={feature.id}
-              className="bg-white dark:bg-gray-800/60 p-8 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none"
+              className={cn("bg-white dark:bg-gray-800/60 p-8 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-current transition shadow-sm dark:shadow-none", themeIconColor)}
             >
               <div className="text-4xl mb-4 flex items-center justify-start">
                 <Icon className="w-8 h-8" />

package/src/main/index.ts

@@ -11,6 +11,7 @@ export * from './rich-text-expert'
 export * from './faq-interactive'
 export * from './price-plan-interactive'
 export * from './gallery/gallery-interactive'
+export * from './delayed-img'
 // Money Price Client Components
 export { MoneyPriceInteractive } from './money-price/money-price-interactive';
 export { MoneyPriceButton } from './money-price/money-price-button';

package/src/main/rich-text-expert.tsx

@@ -4,6 +4,13 @@ import { themeRichTextMarkClass } from '@windrun-huaiin/base-ui/lib';
 
 // default tag renderers
 const defaultTagRenderers = {
+  // text next line
+  br: (chunks: React.ReactNode) => (
+    <React.Fragment>
+      <br /> 
+      {chunks}
+    </React.Fragment>
+  ),
   // text Stong
   strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
   // text Emphasis