@windrun-huaiin/third-ui 5.12.1 → 5.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.12.1",
+  "version": "5.12.3",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/main/cta.tsx

@@ -3,6 +3,7 @@
 import { GradientButton } from "@third-ui/fuma/mdx/gradient-button";
 import { useTranslations } from 'next-intl';
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 export function CTA({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('cta');
@@ -18,7 +19,7 @@ export function CTA({ sectionClassName }: { sectionClassName?: string }) {
           {t('title')} <span className="text-purple-400">{t('eyesOn')}</span>?
         </h2>
         <p className="text-2xl mx-auto mb-8">
-          {t('description1')}
+          {richText(t, 'description1')}
           <br />
           <span className="text-purple-400">{t('description2')}</span>
         </p>

package/src/main/faq.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useTranslations } from 'next-intl';
 import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 export function FAQ({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('faq');
@@ -27,7 +28,7 @@ export function FAQ({ sectionClassName }: { sectionClassName?: string }) {
         {t('title')}
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto">
-        {t('description')}
+        {richText(t, 'description')}
       </p>
       <div className="space-y-6">
         {items.map((item, idx) => {
@@ -48,7 +49,7 @@ export function FAQ({ sectionClassName }: { sectionClassName?: string }) {
               </button>
               {isOpen && (
                 <div className="mt-4 text-gray-700 dark:text-gray-300 text-base">
-                  {item.answer}
+                  {richText(t, `items.${idx}.answer`)}
                 </div>
               )}
             </div>

package/src/main/features.tsx

@@ -4,6 +4,7 @@ import { getGlobalIcon } from '@base-ui/components/global-icon';
 import { useTranslations } from 'next-intl'
 import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 export function Features({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('features');
@@ -21,7 +22,7 @@ export function Features({ sectionClassName }: { sectionClassName?: string }) {
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
-        {t('description')}
+        {richText(t, 'description')}
       </p>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
         {featureItems.map((feature, index) => {
@@ -35,7 +36,7 @@ export function Features({ sectionClassName }: { sectionClassName?: string }) {
                 <Icon className="w-8 h-8" />
               </div>
               <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">{feature.title}</h3>
-              <p className="text-gray-700 dark:text-gray-300">{feature.description}</p>
+              <p className="text-gray-700 dark:text-gray-300">{richText(t, `items.${index}.description`)}</p>
             </div>
           )
         })}

package/src/main/index.ts

@@ -15,4 +15,5 @@ export * from './nprogress-bar';
 export * from './price-plan';
 export * from './ads-alert-dialog';
 export * from './x-button'
-export * from './ai-prompt-textarea'
+export * from './ai-prompt-textarea'
+export * from './rich-text-expert'

package/src/main/price-plan.tsx

@@ -149,18 +149,18 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
       top: Math.max(8, y),
       zIndex: 9999,
       maxWidth: 200,
-      background: '#222',
-      color: '#fff',
-      borderRadius: 10,
-      padding: '16px',
-      boxShadow: '0 4px 24px 0 rgba(0,0,0,0.25)',
-      fontSize: 15,
-      lineHeight: 1.6,
+      transform: 'translateY(-50%)',
       pointerEvents: 'none',
       whiteSpace: 'pre-line',
-      transform: 'translateY(-50%)',
     }
-    return <div style={style}>{content}</div>
+    return (
+      <div 
+        style={style}
+        className="bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm"
+      >
+        {content}
+      </div>
+    )
   }
 
   return (
@@ -174,65 +174,45 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
       </p>
 
       {/* billing switch button */}
-      <div className="flex justify-center items-center gap-8 mb-12">
-        {/* Monthly area */}
-        <div className="flex flex-row-reverse items-center gap-2 w-[180px] justify-end">
-          <button
-            className={cn(
-              'min-w-[120px] px-6 py-2 rounded-full font-medium border transition text-lg',
-              billingKey === 'monthly'
-                ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600'
-                : 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 hover:border-purple-400',
-              'mr-4'
-            )}
-            onClick={() => setBillingKey('monthly')}
-            type="button"
-          >
-            {(billingSwitch.options.find((opt: any) => opt.key === 'monthly')?.name) || 'Monthly'}
-          </button>
-          {/* tag (from right to left), invisible when not selected */}
-          {(() => {
-            const opt = billingSwitch.options.find((opt: any) => opt.key === 'monthly');
-            const bOpt = billingOptions.find((opt: any) => opt.key === 'monthly');
-            if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return <span className="min-w-[80px] px-2 py-1 text-xs rounded invisible"></span>;
-            return (
-              <span className={cn(
-                "min-w-[80px] px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap",
-                billingKey !== 'monthly' && 'invisible'
-              )}>
-                {opt.discountText.replace(
-                  '{percent}',
-                  String(Math.round(Math.abs(bOpt.discount) * 100))
-                )}
-              </span>
-            );
-          })()}
+      <div className="flex flex-col items-center">
+        {/* Binary toggle buttons */}
+        <div className="flex items-center relative mb-3">
+          <div className="flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1">
+            <button
+              className={cn(
+                'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
+                billingKey === 'monthly'
+                  ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                  : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
+              )}
+              onClick={() => setBillingKey('monthly')}
+              type="button"
+            >
+              {(billingSwitch.options.find((opt: any) => opt.key === 'monthly')?.name) || 'Monthly'}
+            </button>
+            <button
+              className={cn(
+                'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
+                billingKey === 'yearly'
+                  ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                  : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
+              )}
+              onClick={() => setBillingKey('yearly')}
+              type="button"
+            >
+              {(billingSwitch.options.find((opt: any) => opt.key === 'yearly')?.name) || 'Yearly'}
+            </button>
+          </div>
         </div>
-        {/* Yearly area */}
-        <div className="flex items-center gap-2 w-[180px] justify-start">
-          <button
-            className={cn(
-              'min-w-[120px] px-6 py-2 rounded-full font-medium border transition text-lg',
-              billingKey === 'yearly'
-                ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600'
-                : 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 hover:border-purple-400',
-              'ml-4'
-            )}
-            onClick={() => setBillingKey('yearly')}
-            type="button"
-          >
-            {(billingSwitch.options.find((opt: any) => opt.key === 'yearly')?.name) || 'Yearly'}
-          </button>
-          {/* tag (from left to right), invisible when not selected */}
+        
+        {/* Discount info - fixed position between buttons and cards */}
+        <div className="h-8 flex items-center justify-center mb-3">
           {(() => {
-            const opt = billingSwitch.options.find((opt: any) => opt.key === 'yearly');
-            const bOpt = billingOptions.find((opt: any) => opt.key === 'yearly');
-            if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return <span className="min-w-[80px] px-2 py-1 text-xs rounded invisible"></span>;
+            const opt = billingSwitch.options.find((opt: any) => opt.key === billingKey);
+            const bOpt = billingOptions.find((opt: any) => opt.key === billingKey);
+            if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return null;
             return (
-              <span className={cn(
-                "min-w-[80px] px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap",
-                billingKey !== 'yearly' && 'invisible'
-              )}>
+              <span className="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap">
                 {opt.discountText.replace(
                   '{percent}',
                   String(Math.round(Math.abs(bOpt.discount) * 100))

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+// default tag renderers
+const defaultTagRenderers = {
+  // text Stong
+  strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+  // text Emphasis
+  em: (chunks: React.ReactNode) => <em>{chunks}</em>,
+  // text Underline
+  u: (chunks: React.ReactNode) => <u>{chunks}</u>,
+  // text Mark
+  mark: (chunks: React.ReactNode) => <mark className="bg-purple-300 dark:bg-purple-500 text-neutral-800 dark:text-neutral-300 px-1 rounded">{chunks}</mark>,
+  // text Delete
+  del: (chunks: React.ReactNode) => <del>{chunks}</del>,
+  // text Subscript
+  sub: (chunks: React.ReactNode) => <sub>{chunks}</sub>,
+  // text Superscript
+  sup: (chunks: React.ReactNode) => <sup>{chunks}</sup>,
+};
+
+// custom tag renderers
+type TagRenderer = (chunks: React.ReactNode) => React.ReactElement;
+type TagRenderers = Record<string, TagRenderer>;
+
+// create rich text renderer
+export function createRichTextRenderer(customRenderers?: TagRenderers) {
+  const renderers = { ...defaultTagRenderers, ...customRenderers };
+  
+  return function richText(t: any, key: string) {
+    return t.rich(key, renderers);
+  };
+}
+
+// default rich text renderer
+export const richText = createRichTextRenderer();

package/src/main/seo-content.tsx

@@ -3,6 +3,7 @@
 
 import { useTranslations } from 'next-intl'
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 interface Section {
   title: string;
@@ -14,28 +15,28 @@ export function SeoContent({ sectionClassName }: { sectionClassName?: string })
 
   return (
     <section id="seo" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
-      <h1 className="text-3xl md:text-4xl font-bold text-center mb-8">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-8">
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
-      </h1>
+      </h2>
       <h3 className="text-center text-gray-600 dark:text-gray-400 mb-12 text-lg">
         {t('description')}
       </h3>
       <div className="bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
         <div className="space-y-10">
           <p className="text-gray-600 dark:text-gray-400 text-lg">
-            {t('intro')}
+            {richText(t, 'intro')}
           </p>
           {t.raw('sections').map((section: Section, index: number) => (
             <div key={index}>
               <h2 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">
                 {section.title}
               </h2>
-              <p className="text-gray-700 dark:text-gray-300">{section.content}</p>
+              <p className="text-gray-700 dark:text-gray-300">{richText(t, `sections.${index}.content`)}</p>
             </div>
           ))}
         </div>
         <p className="mt-10 text-gray-600 dark:text-gray-400 text-lg">
-          {t('conclusion')}
+          {richText(t, 'conclusion')}
         </p>
       </div>
     </section>

package/src/main/tips.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from 'next-intl'
 import { cn } from '@lib/utils';
+import { richText } from '@third-ui/main/rich-text-expert';
 
 interface Tip {
   title: string;
@@ -24,12 +25,16 @@ export function Tips({ sectionClassName }: { sectionClassName?: string }) {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
         {[leftColumn, rightColumn].map((column: Tip[], colIndex) => (
           <div key={colIndex} className="space-y-8">
-            {column.map((tip: Tip, tipIndex) => (
-              <div key={tipIndex} className="space-y-4">
-                <h3 className="text-2xl font-semibold">{tip.title}</h3>
-                <p className="">{tip.description}</p>
-              </div>
-            ))}
+            {column.map((tip: Tip, tipIndex) => {
+              // calculate the actual index in the original array
+              const actualIndex = colIndex === 0 ? tipIndex : tipIndex + midPoint;
+              return (
+                <div key={tipIndex} className="space-y-4">
+                  <h3 className="text-2xl font-semibold">{tip.title}</h3>
+                  <p className="">{richText(t, `sections.${actualIndex}.description`)}</p>
+                </div>
+              );
+            })}
           </div>
         ))}
       </div>

package/src/main/usage.tsx

@@ -3,6 +3,7 @@
 import { useTranslations } from 'next-intl'
 import { cn } from '@lib/utils';
 import { globalLucideIcons as icons, getGlobalIcon } from '@base-ui/components/global-icon'
+import { richText } from '@third-ui/main/rich-text-expert';
 
 export function Usage({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('usage');
@@ -18,7 +19,7 @@ export function Usage({ sectionClassName }: { sectionClassName?: string }) {
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
-        {t('description')}
+        {richText(t, 'description')}
       </p>
       <div className="bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
@@ -33,7 +34,7 @@ export function Usage({ sectionClassName }: { sectionClassName?: string }) {
                   <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">
                     {`${idx + 1}. ${step.title}`}
                   </h3>
-                  <p className="text-gray-700 dark:text-gray-300">{step.description}</p>
+                  <p className="text-gray-700 dark:text-gray-300">{richText(t, `steps.${idx}.description`)}</p>
                 </div>
               </div>
             )