@rash2x/bridge-widget 0.1.19 → 0.2.0

package/README.md

@@ -47,24 +47,6 @@ npm install @tonconnect/ui-react @ton/core @ton/crypto @ton/ton
 npm install @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-adapters tronweb
 ```
 
-### Required shadcn/ui Components
-
-This library requires certain shadcn/ui components to be installed in your project. The library does **not bundle** these components to avoid duplication and allow you to use your own styled versions.
-
-**Required components:** `accordion`, `button`, `card`, `dialog`, `input`, `skeleton`, `switch`, `tooltip`
-
-Install them using shadcn CLI:
-
-```bash
-npx shadcn@latest add accordion button card dialog input skeleton switch tooltip
-```
-
-**Important:** Your project must have the following path aliases configured:
-- `@/components/ui` - for UI components
-- `@/lib/utils` - for the `cn` utility function
-
-For detailed setup instructions, see [SHADCN_COMPONENTS.md](./SHADCN_COMPONENTS.md).
-
 ## Quick Start
 
 ### 1. Basic Setup
@@ -204,13 +186,11 @@ Simply import the styles and you're good to go:
 import '@evaa/bridge-widget/styles.css';
 ```
 
-All Tailwind utility classes used by the widget are already included in the compiled CSS.
+All Tailwind utility classes used by the widget are already included in the compiled CSS. The widget has its own Tailwind configuration that ensures all necessary classes are bundled during the library build process.
 
 ### Theme Customization
 
-#### Option 1: CSS Variables (Simple)
-
-Customize colors by overriding CSS variables in your own stylesheet:
+Customize the widget's appearance by overriding CSS variables in your own stylesheet:
 
 ```css
 :root {
@@ -219,7 +199,8 @@ Customize colors by overriding CSS variables in your own stylesheet:
   --foreground: #171717;     /* Text color */
   --card: #f2f2f2;          /* Card background */
   --border: #00000029;      /* Border color */
-  /* ... see styles.css for all available variables */
+  --radius: 0.625rem;       /* Border radius */
+  /* ... see dist/styles.css for all available variables */
 }
 
 [data-theme="dark"] {
@@ -230,30 +211,13 @@ Customize colors by overriding CSS variables in your own stylesheet:
 }
 ```
 
-#### Option 2: Tailwind Integration (Advanced)
-
-If your project already uses Tailwind CSS and you want full control:
-
-1. Add the widget to your Tailwind `content` configuration:
-
-```js
-// tailwind.config.js
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@evaa/bridge-widget/**/*.{js,mjs}', // Add this line
-  ],
-  theme: {
-    extend: {
-      // Your custom theme extensions will apply to the widget
-    },
-  },
-};
-```
-
-2. The widget will use your project's Tailwind configuration in addition to its pre-compiled styles.
+**Complete list of customizable CSS variables:**
+- Color tokens: `--background`, `--foreground`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`, `--border`, `--input`, `--ring`
+- Semantic colors: `--link`, `--filter`, `--swap`, `--settings-button`, `--modal-x`, `--input-icon`, `--balance-icon`, and many more
+- Border radius: `--radius` (affects all rounded corners)
+- See the `dist/styles.css` file for the complete list
 
-**Note:** The widget will work perfectly fine without Tailwind in your project.
+**Note:** The widget will work perfectly fine without Tailwind in your consuming project. All necessary styles are pre-compiled and included in `styles.css`.
 
 ## Advanced Usage