Add multi language

rollup.config.dev.js

@@ -7,7 +7,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
-import pkg from './package.json' assert { type: 'json' };
+import pkg from './package.json' with { type: 'json' };
 
 export default {
   input: 'src/index.ts',
@@ -30,8 +30,8 @@ export default {
         {
           find: 'global',
           replacement: 'globalThis',
-        }
-      ]
+        },
+      ],
     }),
     json(),
     peerDepsExternal(),
@@ -53,9 +53,7 @@ export default {
       exclude: ['node_modules', 'motion'],
     }),
   ],
-  external: [
-    ...Object.keys(pkg.peerDependencies || {}),
-  ],
+  external: [...Object.keys(pkg.peerDependencies || {})],
   watch: {
     clearScreen: false,
     include: 'src/**',

rollup.config.prod.js

@@ -9,7 +9,7 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
 import tailwindcss from '@tailwindcss/postcss';
 
-import pkg from './package.json' assert { type: 'json' };
+import pkg from './package.json' with { type: 'json' };
 
 export default {
   input: 'src/index.ts',
@@ -33,8 +33,8 @@ export default {
         {
           find: 'global',
           replacement: 'globalThis',
-        }
-      ]
+        },
+      ],
     }),
     json(),
     peerDepsExternal(),
@@ -54,7 +54,13 @@ export default {
     commonjs(),
     postcss({
       extract: false,
-      inject: true,
+      extensions: ['.css'],
+      inject: {
+        insertAt: 'top',
+      },
+      config: {
+        path: './postcss.config.mjs',
+      },
       minimize: true,
       plugins: [tailwindcss],
     }),
@@ -63,7 +69,5 @@ export default {
       exclude: ['node_modules', 'motion'],
     }),
   ],
-  external: [
-    ...Object.keys(pkg.peerDependencies || {}),
-  ],
+  external: [...Object.keys(pkg.peerDependencies || {})],
 };

src/components/Button/index.tsx

@@ -20,7 +20,7 @@ interface ButtonProps {
 }
 
 const buttonBase =
-  'bluxcc:flex bluxcc:justify-center bluxcc:items-center bluxcc:px-[10px] bluxcc:transition-all bluxcc:w-full';
+  'bluxcc:flex bluxcc:justify-center bluxcc:items-center bluxcc:px-[10px] bluxcc:transition-all bluxcc:duration-300 bluxcc:w-full';
 
 const sizeClasses: Record<ButtonSize, string> = {
   small: 'bluxcc:h-8 bluxcc:!text-sm bluxcc:gap-1',

src/components/CardItem/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, MouseEvent } from 'react';
 import { useProvider } from '../../context/provider';
 import { ArrowRight } from '../../assets/Icons';
 import hexToRgba from '../../utils/hexToRgba';
+import { useLang } from '../../hooks/useLang';
 
 type CardItemProps = {
   variant?: 'social' | 'default' | 'input';
@@ -30,6 +31,7 @@ const CardItem = ({
 }: CardItemProps) => {
   const context = useProvider();
   const { appearance } = context.value.config;
+  const t = useLang();
 
   const [inputValue, setInputValue] = useState(label || '');
   const [isValid, setIsValid] = useState(false);
@@ -70,7 +72,7 @@ const CardItem = ({
   return (
     <div
       onClick={variant === 'input' ? undefined : onClick}
-      className={`bluxcc:flex bluxcc:h-14! bluxcc:w-full bluxcc:items-center bluxcc:border bluxcc:py-2 bluxcc:pr-3.5 bluxcc:pl-[10px] ${
+      className={`bluxcc:flex bluxcc:!h-14 bluxcc:w-full bluxcc:items-center bluxcc:border bluxcc:py-2 bluxcc:pr-3.5 bluxcc:pl-[10px] ${
         variant === 'input' ? 'bluxcc:cursor-text' : 'bluxcc:cursor-pointer'
       }`}
       style={{
@@ -105,7 +107,7 @@ const CardItem = ({
               value={inputValue}
               onChange={handleInputChange}
               onKeyDown={handleKeyDown}
-              placeholder="Email"
+              placeholder={t('email')}
               className="bluxcc:mr-1 bluxcc:h-full bluxcc:w-full bluxcc:bg-transparent bluxcc:outline-hidden bluxcc:focus:outline-hidden"
               style={{ color: appearance.textColor }}
               onFocus={() => setIsFocused(true)}
@@ -133,7 +135,7 @@ const CardItem = ({
                     : '1px',
                 }}
               >
-                Submit
+                {t('submit')}
               </button>
             </div>
           </>
@@ -150,7 +152,7 @@ const CardItem = ({
             backgroundColor: `${hexToRgba(appearance.accent, 0.1)}`,
           }}
         >
-          Recent
+          {t('recent')}
         </div>
       )}
 

src/components/Input/index.tsx

@@ -99,7 +99,7 @@ const InputField = ({
         </label>
       )}
       <div
-        className={`bluxcc:flex bluxcc:h-14 bluxcc:w-full bluxcc:items-center bluxcc:border bluxcc:px-4 bluxcc:py-2 bluxcc:transition-all ${className}`}
+        className={`bluxcc:flex bluxcc:h-14 bluxcc:w-full bluxcc:items-center bluxcc:border bluxcc:px-4 bluxcc:py-2 bluxcc:transition-all bluxcc:duration-300 ${className}`}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
         onMouseEnter={onMouseEnter}

src/components/Modal/index.tsx

@@ -87,7 +87,7 @@ const Modal = ({
         onClick={(e) => e.target === e.currentTarget && handleClose(onClose)}
       >
         <div
-          className={`bluxcc:box-border bluxcc:overflow-hidden bluxcc:!shadow-[0px_4px_80px_0px_#00000008] bluxcc:transition-all ${
+          className={`bluxcc:box-border bluxcc:overflow-hidden bluxcc:!shadow-[0px_4px_80px_0px_#00000008] bluxcc:transition-all bluxcc:duration-300 ${
             isMobile
               ? 'bluxcc:fixed bluxcc:bottom-0 bluxcc:left-0 bluxcc:max-h-[90vh] bluxcc:w-full bluxcc:!rounded-b-none'
               : 'bluxcc:relative bluxcc:!w-[360px]'