arkada-widgets 1.0.3 → 1.0.5

package/README.md

@@ -2,6 +2,9 @@
 
 Production-ready widget library for the Arkada ecosystem. Widgets are available as standard React components and as self-contained Web Components for framework-agnostic embedding.
 
+**[Live Demo →](https://Arkada-gg.github.io/widgets/)**  
+**[GitHub](https://github.com/Arkada-gg/widgets)**
+
 ## Table of Contents
 
 - [Installation](#installation)
@@ -32,7 +35,7 @@ npm install arkada-widgets
 ### React
 
 ```tsx
-import { WalletVerificationButton, VerifyWalletVariants } from 'arkada-widgets'
+import { WalletVerificationButton, VerifyWalletVariants } from "arkada-widgets";
 
 export function App() {
   return (
@@ -41,19 +44,19 @@ export function App() {
       theme="dark"
       variant={VerifyWalletVariants.COMPACT}
     />
-  )
+  );
 }
 ```
 
 **Props:**
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `walletAddress` | `string` | — | Wallet address to check |
-| `theme` | `"dark" \| "light"` | `"dark"` | Color theme |
-| `variant` | `VerifyWalletVariant` | `"compact"` | Visual layout |
-| `referralCode` | `string` | — | Appended as `?ref=<code>` to the verification URL |
-| `someVerified` | `boolean` | — | Verified if any network has rank > 0 |
+| Prop            | Type                  | Default     | Description                                       |
+| --------------- | --------------------- | ----------- | ------------------------------------------------- |
+| `walletAddress` | `string`              | —           | Wallet address to check                           |
+| `theme`         | `"dark" \| "light"`   | `"dark"`    | Color theme                                       |
+| `variant`       | `VerifyWalletVariant` | `"compact"` | Visual layout                                     |
+| `referralCode`  | `string`              | —           | Appended as `?ref=<code>` to the verification URL |
+| `someVerified`  | `boolean`             | —           | Verified if any network has rank > 0              |
 
 ---
 
@@ -62,7 +65,7 @@ export function App() {
 Import once to register the custom element — no React needed in your project:
 
 ```ts
-import 'arkada-widgets/arkada-wvbs-widget'
+import "arkada-widgets/arkada-wvbs-widget";
 ```
 
 **Vue:**
@@ -79,14 +82,11 @@ import 'arkada-widgets/arkada-wvbs-widget'
 **Angular** — add `CUSTOM_ELEMENTS_SCHEMA` to the module, then import in the component:
 
 ```ts
-import 'arkada-widgets/arkada-wvbs-widget'
+import "arkada-widgets/arkada-wvbs-widget";
 ```
 
 ```html
-<arkada-wvbs-widget
-  [attr.data]="props"
-  theme="dark"
-></arkada-wvbs-widget>
+<arkada-wvbs-widget [attr.data]="props" theme="dark"></arkada-wvbs-widget>
 ```
 
 **Svelte:**
@@ -102,27 +102,27 @@ import 'arkada-widgets/arkada-wvbs-widget'
 
 **Attributes:**
 
-| Attribute | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `data` | JSON string | — | Widget config (see shape below) |
-| `theme` | `"dark" \| "light"` | `"dark"` | Color theme |
-| `size` | `"sm" \| "lg"` | `"lg"` | Widget size |
+| Attribute | Type                | Default  | Description                     |
+| --------- | ------------------- | -------- | ------------------------------- |
+| `data`    | JSON string         | —        | Widget config (see shape below) |
+| `theme`   | `"dark" \| "light"` | `"dark"` | Color theme                     |
+| `size`    | `"sm" \| "lg"`      | `"lg"`   | Widget size                     |
 
 `data` JSON shape:
 
 ```jsonc
 {
-  "walletAddress": "0x...",    // required
-  "variant": "compact",        // optional — visual layout
-  "referralCode": "MYREF",     // optional
-  "someVerified": false        // optional
+  "walletAddress": "0x...", // required
+  "variant": "compact", // optional — visual layout
+  "referralCode": "MYREF", // optional
+  "someVerified": false, // optional
 }
 ```
 
 You can also set data as a JS object to skip JSON serialization:
 
 ```js
-document.querySelector('arkada-wvbs-widget').data = { walletAddress: '0x...' }
+document.querySelector("arkada-wvbs-widget").data = { walletAddress: "0x..." };
 ```
 
 ---
@@ -134,19 +134,20 @@ No build step — load the script from a CDN:
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-</head>
-<body>
-
-  <arkada-wvbs-widget
-    data='{"walletAddress":"0xYourWalletAddress","variant":"compact"}'
-    theme="dark"
-  ></arkada-wvbs-widget>
-
-  <script type="module" src="https://cdn.jsdelivr.net/npm/arkada-widgets/dist/arkada-wvbs-widget.js"></script>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <arkada-wvbs-widget
+      data='{"walletAddress":"0xYourWalletAddress","variant":"compact"}'
+      theme="dark"
+    ></arkada-wvbs-widget>
 
-</body>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/arkada-widgets/dist/arkada-wvbs-widget.js"
+    ></script>
+  </body>
 </html>
 ```
 

package/dist/arkada-widgets.css

@@ -0,0 +1,2 @@
+:host{--wvb-gradient-start:#ff6a59;--wvb-gradient-end:#5377ff;--wvb-verified-start:#0e9035;--wvb-verified-end:#14be47;--wvb-container-gradient-dark-sides:#000;--wvb-container-gradient-dark-middle:#2d2d2d;--wvb-container-gradient-light-sides:#d2d2d2;--wvb-container-gradient-light-middle:#fff;--wvb-container-gradient-light-banner-sides:#efefef;--wvb-glow:#be66b3;--wvb-focus:#00b17e}.vwb-gradient-border-dark{background:linear-gradient(135deg,#ffffff80,#ffffff40,#ffffff40,#ffffff1a)}.vwb-gradient-border-light{background:linear-gradient(135deg,#6b6b6b80,#6b6b6b40,#6b6b6b40,#6b6b6b1a)}.vwb-gradient-text{background:linear-gradient(82deg, var(--wvb-gradient-start,#ff6a59) -12.41%, var(--wvb-gradient-end,#5377ff) 111.55%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.vwb-cta-gradient{background:linear-gradient(82deg, var(--wvb-gradient-start,#ff6a59) -12.41%, var(--wvb-gradient-end,#5377ff) 111.55%);box-shadow:0px 0px 6px 0px var(--wvb-glow,#be66b3)}.vwb-floating-nv-gradient{background:linear-gradient(135deg,#d9d9d980 0%,#73737380 100%);box-shadow:0 4px 4px #00000040}.vwb-floating-nvc-gradient{background:var(--Gradient-base,linear-gradient(82deg, #ff6a5980 -12.41%, #5377ff80 111.55%));box-shadow:0 4px 4px #00000040}.vwb-floating-v-gradient{background:linear-gradient(135deg,#7defa380 0%,#2bb45980 100%);box-shadow:0 4px 4px #00000040}.vwb-verified-gradient{background:linear-gradient(90deg, var(--wvb-verified-start,#0e9035) 0%, var(--wvb-verified-end,#14be47) 100%)}.vwb-border-dark{background:linear-gradient(90deg, var(--wvb-container-gradient-dark-sides,#000) 0%, var(--wvb-container-gradient-dark-middle,#2d2d2d) 50%, var(--wvb-container-gradient-dark-sides,#000) 100%)}.vwb-border-light-compact{background:linear-gradient(90deg, var(--wvb-container-gradient-light-sides,#d2d2d2) 0%, var(--wvb-container-gradient-light-middle,#fff) 50%, var(--wvb-container-gradient-light-sides,#d2d2d2) 100%)}.vwb-border-light-banner{background:linear-gradient(90deg, var(--wvb-container-gradient-light-banner-sides,#efefef) 0%, var(--wvb-container-gradient-light-middle,#fff) 50%, var(--wvb-container-gradient-light-banner-sides,#efefef) 100%)}.vwb-full-gradient{background:linear-gradient(82deg, var(--wvb-gradient-start,#ff6a59) -12.41%, var(--wvb-gradient-end,#5377ff) 111.55%)}.vwb-interactive{transition:filter .15s,transform .15s}.vwb-interactive:hover{filter:brightness(1.08)}.vwb-interactive:active{filter:brightness(.95);transform:scale(.98)}.vwb-interactive:focus-visible{outline:2px solid var(--wvb-focus,#00b17e);outline-offset:2px}
+/*$vite$:1*/

package/dist/arkada-widgets.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./arkada-wvbs-widget-DLewRKfj.js";
+export { t as ArkadaWvbsWidget, e as VerifyWalletVariants };