bluxcc · ceydae · May 19, 2025 · May 13, 2025 · May 16, 2025 · May 19, 2025
diff --git a/package.json b/package.json
@@ -47,20 +47,20 @@
     "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "rollup": "^4.29.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.6",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.19.1"
+    "typescript-eslint": "^8.19.1",
+    "@tailwindcss/postcss": "^4.1.6"
   },
   "optionalDependencies": {
     "@rollup/rollup-darwin-x64": "4.30.1",

diff --git a/postcss.config.cjs b/postcss.config.cjs
diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
diff --git a/rollup.config.dev.js b/rollup.config.dev.js
@@ -4,8 +4,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
-import tailwindcss from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
+import tailwindcss from '@tailwindcss/postcss';
 
 import pkg from './package.json' assert { type: 'json' };
 
@@ -36,7 +35,7 @@ export default {
       inject: true,
       minimize: false,
       sourceMap: true,
-      plugins: [tailwindcss, autoprefixer],
+      plugins: [tailwindcss],
     }),
     typescript({
       tsconfig: './tsconfig.json',

diff --git a/rollup.config.prod.js b/rollup.config.prod.js
@@ -3,10 +3,9 @@ import terser from '@rollup/plugin-terser';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+// import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
-import tailwindcss from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
+import tailwindcss from '@tailwindcss/postcss';
 
 import pkg from './package.json' assert { type: 'json' };
 
@@ -27,7 +26,7 @@ export default {
   preserveEntrySignatures: 'strict',
   treeshake: true,
   plugins: [
-   // peerDepsExternal(),
+    // peerDepsExternal(),
     terser({
       compress: {
         drop_console: true,
@@ -46,7 +45,7 @@ export default {
       extract: false,
       inject: true,
       minimize: true,
-      plugins: [tailwindcss, autoprefixer],
+      plugins: [tailwindcss],
     }),
     typescript({
       tsconfig: './tsconfig.json',

diff --git a/src/assets/Icons.tsx b/src/assets/Icons.tsx
@@ -111,7 +111,7 @@ export const Loading = ({ fill = '#0C1083' }: { fill?: string }) => (
     viewBox="0 0 25 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className="bluxcc-animate-spin"
+    className="bluxcc:animate-spin"
   >
     <mask
       id="mask0_2054_770"

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -20,12 +20,12 @@ 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:w-full';
 
 const sizeClasses: Record<ButtonSize, string> = {
-  small: 'bluxcc-h-8 bluxcc-text-sm bluxcc-gap-1',
-  medium: 'bluxcc-h-10 bluxcc-text-sm bluxcc-gap-2',
-  large: 'bluxcc-h-[52px] bluxcc-text-base bluxcc-gap-2',
+  small: 'bluxcc:h-8 bluxcc:!text-sm bluxcc:gap-1',
+  medium: 'bluxcc:h-10 bluxcc:!text-sm bluxcc:gap-2',
+  large: 'bluxcc:h-[52px] bluxcc:!text-base bluxcc:gap-2',
 };
 
 const Button = ({
@@ -80,7 +80,7 @@ const Button = ({
       disabled={state === 'disabled'}
       className={`${buttonBase} ${sizeClasses[size]} ${
         className ?? ''
-      } bluxcc-transition-all bluxcc-duration-300`}
+      } bluxcc:transition-all bluxcc:duration-300`}
       style={baseStyle}
     >
       {startIcon && <span>{startIcon}</span>}

diff --git a/src/components/CardItem/index.tsx b/src/components/CardItem/index.tsx
@@ -70,8 +70,8 @@ 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-pl-[10px] bluxcc-pr-3.5 ${
-        variant === 'input' ? 'bluxcc-cursor-text' : 'bluxcc-cursor-pointer'
+      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={{
         borderRadius: appearance.borderRadius,
@@ -92,12 +92,12 @@ const CardItem = ({
             ? appearance.borderWidth
             : '1px',
         }}
-        className="bluxcc-flex bluxcc-size-10 bluxcc-flex-shrink-0 bluxcc-items-center bluxcc-justify-center bluxcc-overflow-hidden bluxcc-border bluxcc-transition-[border-radius] bluxcc-duration-300"
+        className="bluxcc:flex bluxcc:size-10 bluxcc:shrink-0 bluxcc:items-center bluxcc:justify-center bluxcc:overflow-hidden bluxcc:border bluxcc:transition-[border-radius] bluxcc:duration-300"
       >
         {startIcon}
       </span>
 
-      <div className="bluxcc-relative bluxcc-ml-4 bluxcc-flex bluxcc-h-full bluxcc-flex-1 bluxcc-items-center">
+      <div className="bluxcc:relative bluxcc:ml-4 bluxcc:flex bluxcc:h-full bluxcc:flex-1 bluxcc:items-center">
         {variant === 'input' ? (
           <>
             <input
@@ -106,7 +106,7 @@ const CardItem = ({
               onChange={handleInputChange}
               onKeyDown={handleKeyDown}
               placeholder="Email"
-              className="bluxcc-mr-1 bluxcc-h-full bluxcc-w-full bluxcc-bg-transparent bluxcc-outline-none focus:bluxcc-outline-none"
+              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)}
               onBlur={() => {
@@ -116,11 +116,11 @@ const CardItem = ({
                 }
               }}
             />
-            <div className="bluxcc-flex bluxcc-h-10 bluxcc-w-[100px] bluxcc-items-center bluxcc-justify-center bluxcc-bg-transparent">
+            <div className="bluxcc:flex bluxcc:h-10 bluxcc:w-[100px] bluxcc:items-center bluxcc:justify-center bluxcc:bg-transparent">
               <button
                 disabled={!isValid}
                 onClick={() => onSubmit?.(inputValue)}
-                className={`bluxcc-absolute bluxcc-right-0 bluxcc-flex bluxcc-h-8 !bluxcc-w-[68px] bluxcc-items-center bluxcc-justify-center bluxcc-border bluxcc-bg-transparent bluxcc-text-sm bluxcc-font-medium bluxcc-transition-[border-radius,background,border-color] bluxcc-duration-150`}
+                className={`bluxcc:absolute bluxcc:right-0 bluxcc:flex bluxcc:h-8 bluxcc:w-[68px]! bluxcc:items-center bluxcc:justify-center bluxcc:border bluxcc:bg-transparent bluxcc:!text-sm bluxcc:font-medium bluxcc:transition-[border-radius,background,border-color] bluxcc:duration-150`}
                 style={{
                   borderRadius: appearance.borderRadius,
                   borderColor: isValid
@@ -137,12 +137,12 @@ const CardItem = ({
             </div>
           </>
         ) : (
-          <span className="bluxcc-select-none bluxcc-font-medium">{label}</span>
+          <span className="bluxcc:font-medium bluxcc:select-none">{label}</span>
         )}
       </div>
       {isRecent && (
         <div
-          className={`bluxcc-px-2 bluxcc-py-1 bluxcc-text-xs bluxcc-font-normal`}
+          className={`bluxcc:px-2 bluxcc:py-1 bluxcc:text-xs bluxcc:font-normal`}
           style={{
             color: appearance.accent,
             borderRadius: appearance.borderRadius,
@@ -154,7 +154,7 @@ const CardItem = ({
       )}
 
       {endArrow && (
-        <span className="bluxcc-ml-auto bluxcc-flex bluxcc-items-center">
+        <span className="bluxcc:ml-auto bluxcc:flex bluxcc:items-center">
           <ArrowRight fill={appearance.textColor} />
         </span>
       )}

diff --git a/src/components/Input/OTPInput.tsx b/src/components/Input/OTPInput.tsx
@@ -89,7 +89,7 @@ const OTPInput: React.FC<OTPInputProps> = ({ otp, setOtp, error }) => {
     }) as React.CSSProperties;
 
   return (
-    <div className="bluxcc-flex bluxcc-gap-1">
+    <div className="bluxcc:flex bluxcc:gap-1">
       {otp.map((digit, index) => (
         <input
           autoFocus={index === 0}
@@ -104,7 +104,7 @@ const OTPInput: React.FC<OTPInputProps> = ({ otp, setOtp, error }) => {
           onChange={(e) => handleChange(index, e)}
           onPaste={handlePaste}
           onKeyDown={(e) => handleKeyDown(index, e)}
-          className="bluxcc-h-14 bluxcc-w-12 bluxcc-border bluxcc-text-center bluxcc-text-lg bluxcc-outline-none focus:bluxcc-ring-1"
+          className="bluxcc:h-14 bluxcc:w-12 bluxcc:border bluxcc:text-center bluxcc:text-lg bluxcc:outline-hidden bluxcc:focus:ring-1"
           style={getInputStyle(digit)}
         />
       ))}

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -40,7 +40,7 @@ const CustomButton = ({
         backgroundColor: appearance.background,
         borderWidth: appearance.includeBorders ? appearance.borderWidth : '1px',
       }}
-      className="bluxcc-border bluxcc-px-3 bluxcc-py-1 bluxcc-text-sm bluxcc-font-medium bluxcc-transition-all bluxcc-duration-300"
+      className="bluxcc:border bluxcc:!px-3 bluxcc:!py-1 bluxcc:!text-sm bluxcc:font-medium bluxcc:transition-all bluxcc:duration-300"
     >
       {button}
     </button>
@@ -88,18 +88,18 @@ const InputField = ({
   };
 
   return (
-    <div className="bluxcc-flex bluxcc-w-full bluxcc-flex-col">
+    <div className="bluxcc:flex bluxcc:w-full bluxcc:flex-col">
       {label && (
         <label
           style={{ color: error ? '#ec2929' : appearance.textColor }}
-          className={`bluxcc-mb-1 bluxcc-ml-2 bluxcc-flex bluxcc-justify-between bluxcc-text-sm`}
+          className={`bluxcc:mb-1 bluxcc:ml-2 bluxcc:flex bluxcc:justify-between bluxcc:text-sm`}
         >
           <span>{label}</span>
           <span>{customLabel}</span>
         </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 ${className}`}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
         onMouseEnter={onMouseEnter}
@@ -116,14 +116,15 @@ const InputField = ({
           } as React.CSSProperties
         }
       >
-        {iconLeft && <div className="bluxcc-mr-2">{iconLeft}</div>}
+        {iconLeft && <div className="bluxcc:mr-2">{iconLeft}</div>}
         <input
+          id="bluxcc-input"
           min={type === 'number' ? 1 : undefined}
           type={type}
           autoFocus={autoFocus}
           value={value}
           placeholder={placeholder}
-          className="bluxcc-mr-2 bluxcc-bg-transparent bluxcc-outline-none"
+          className="bluxcc:!mr-2 bluxcc:bg-transparent bluxcc:outline-hidden"
           style={{
             color: appearance.textColor,
             width: !button ? '100%' : '90%',
@@ -137,11 +138,11 @@ const InputField = ({
             appearance={appearance}
           />
         )}
-        {iconRight && <div className="bluxcc-ml-2">{iconRight}</div>}
+        {iconRight && <div className="bluxcc:ml-2">{iconRight}</div>}
       </div>
       {error && (
         <p
-          className={`bluxcc-ml-2 bluxcc-mt-1 bluxcc-text-xs bluxcc-text-alert-error`}
+          className={`bluxcc:mt-1 bluxcc:ml-2 bluxcc:text-xs bluxcc:text-alert-error`}
         >
           {error}
         </p>

diff --git a/src/components/Modal/Backdrop/index.tsx b/src/components/Modal/Backdrop/index.tsx
@@ -12,10 +12,10 @@ const ModalBackdrop = ({
   isSticky = false,
 }: BackdropProps) => (
   <div
-    className={`bluxcc-fixed bluxcc-inset-0 bluxcc-z-40 bluxcc-bg-black bluxcc-bg-opacity-10 bluxcc-backdrop-blur-[1px] ${
+    className={`bluxcc:fixed bluxcc:inset-0 bluxcc:z-40 bluxcc:bg-black/10 bluxcc:!backdrop-blur-[1px] ${
       isClosing && !isSticky
-        ? 'bluxcc-animate-fadeOut'
-        : 'bluxcc-animate-fadeIn'
+        ? 'bluxcc:animate-fadeOut'
+        : 'bluxcc:animate-fadeIn'
     }`}
     onClick={onClose}
   />

diff --git a/src/components/Modal/Header/index.tsx b/src/components/Modal/Header/index.tsx
@@ -21,36 +21,36 @@ const ModalHeader = ({
 }: HeaderProps) => {
   const context = useProvider();
   return (
-    <div className="bluxcc-flex bluxcc-h-[60px] bluxcc-w-full bluxcc-items-center bluxcc-justify-between">
+    <div className="bluxcc:flex bluxcc:h-[60px] bluxcc:w-full bluxcc:items-center bluxcc:justify-between">
       {icon === 'info' ? (
         <div
           onClick={onInfo}
-          className="bluxcc-flex bluxcc-size-5 bluxcc-items-center bluxcc-justify-center"
+          className="bluxcc:flex bluxcc:size-5 bluxcc:items-center bluxcc:justify-center"
         >
           {/* cursor-pointer */}
           {/* <InfoIcon fill={context.value.config.appearance.textColor} /> */}
         </div>
       ) : icon === 'back' ? (
         <div
           onClick={onBack}
-          className="bluxcc-flex bluxcc-size-5 bluxcc-cursor-pointer bluxcc-items-center bluxcc-justify-center"
+          className="bluxcc:flex bluxcc:size-5 bluxcc:cursor-pointer bluxcc:items-center bluxcc:justify-center"
         >
           <ArrowLeft fill={context.value.config.appearance.textColor} />
         </div>
       ) : (
-        <div className="bluxcc-size-5" />
+        <div className="bluxcc:size-5" />
       )}
 
-      <p className="bluxcc-flex-grow bluxcc-select-none bluxcc-text-center bluxcc-text-base bluxcc-font-medium">
+      <p className="bluxcc:grow bluxcc:select-none bluxcc:text-center bluxcc:text-base bluxcc:font-medium">
         {title}
       </p>
 
       {closeButton ? (
-        <div onClick={onClose} className="bluxcc-size-5 bluxcc-cursor-pointer">
+        <div onClick={onClose} className="bluxcc:size-5 bluxcc:cursor-pointer">
           <Close fill={context.value.config.appearance.textColor} />
         </div>
       ) : (
-        <div className="bluxcc-size-5" />
+        <div className="bluxcc:size-5" />
       )}
     </div>
   );

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -81,16 +81,16 @@ const Modal = ({
       )}
 
       <div
-        className={`bluxcc-absolute bluxcc-inset-0 bluxcc-z-[9999] bluxcc-flex bluxcc-items-center bluxcc-justify-center ${
-          isClosing && !isSticky && 'bluxcc-animate-fadeOut'
+        className={`bluxcc:absolute bluxcc:inset-0 bluxcc:z-9999 bluxcc:flex bluxcc:items-center bluxcc:justify-center ${
+          isClosing && !isSticky && 'bluxcc:animate-fadeOut'
         }`}
         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 ${
             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]'
+              ? 'bluxcc:fixed bluxcc:bottom-0 bluxcc:left-0 bluxcc:max-h-[90vh] bluxcc:w-full bluxcc:!rounded-b-none'
+              : 'bluxcc:relative bluxcc:!w-[360px]'
           }`}
           style={{
             height:
@@ -122,7 +122,7 @@ const Modal = ({
             borderRadius: appearance.borderRadius,
           }}
         >
-          <div ref={contentRef} className="bluxcc-px-6 bluxcc-pb-4">
+          <div ref={contentRef} className="bluxcc:px-6 bluxcc:pb-4">
             <ModalHeader
               icon={icon}
               onInfo={onInfo}