@rash2x/bridge-widget 0.1.17 → 0.1.19

package/README.md

@@ -194,38 +194,67 @@ function App() {
 
 ## Styling
 
-The widget uses Tailwind CSS. Make sure your project has Tailwind configured, or the styles will not work correctly.
+The widget comes with pre-compiled Tailwind CSS styles. **You don't need to have Tailwind installed** in your project for the widget to work.
 
-### Tailwind Configuration
+### Basic Usage
 
-```js
-// tailwind.config.js
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@evaa/bridge-widget/**/*.{js,mjs}',
-  ],
-  // ... rest of your config
-};
+Simply import the styles and you're good to go:
+
+```tsx
+import '@evaa/bridge-widget/styles.css';
 ```
 
-### Custom Theme
+All Tailwind utility classes used by the widget are already included in the compiled CSS.
 
-You can customize the theme by overriding CSS variables:
+### Theme Customization
+
+#### Option 1: CSS Variables (Simple)
+
+Customize colors by overriding CSS variables in your own stylesheet:
 
 ```css
 :root {
-  --primary: #your-color;
-  --background: #your-color;
-  /* ... other variables */
+  --primary: #0095f9;        /* Primary brand color */
+  --background: #ffffff;     /* Background color */
+  --foreground: #171717;     /* Text color */
+  --card: #f2f2f2;          /* Card background */
+  --border: #00000029;      /* Border color */
+  /* ... see styles.css for all available variables */
 }
 
 [data-theme="dark"] {
-  --primary: #your-dark-color;
-  /* ... other variables */
+  --primary: #5200ff;
+  --background: #000000;
+  --foreground: #ffffff;
+  /* ... dark theme overrides */
 }
 ```
 
+#### 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.
+
+**Note:** The widget will work perfectly fine without Tailwind in your project.
+
 ## Advanced Usage
 
 ### Using Stores Directly

package/dist/assets/fonts/fonts.css

@@ -0,0 +1,81 @@
+/* fonts.css */
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Thin.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-UltraLight.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Light.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Medium.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-SemiBold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Bold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-ExtraBold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Black.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Heavy.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+}
+
+
+@font-face {
+    font-family: 'Hanson';
+    src:
+      url(/assets/fonts/hanson-bold.woff2) format('woff2'),
+      url(/assets/fonts/hanson-bold.woff) format('woff');
+    font-style: normal;
+    font-weight: 700;
+  }

package/dist/evaa-bridge.cjs

@@ -1376,7 +1376,7 @@ const TokenSelectModal = ({
     [groupedTokens.willChangeSrcChain]
   );
   const hasNoResults = tokensToRender.length === 0 && willChangeSrcTokens.length === 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "!h-[90dvh] overflow-hidden flex flex-col", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "h-[90dvh] max-h-dvh overflow-hidden flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: t("bridge.selectToken") }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SearchInput,