@mictonode/widget 0.3.17 → 0.3.18

package/lib/main.css

@@ -22,53 +22,162 @@ code, pre, .font-mono {
 }
 
 /* ============================================================
-   S4 4.20 — DaisyUI Glassmorphism Override (Dark Mode)
-   Aligns DaisyUI components with Explorer Design System
+   S5.7 — Standalone Widget Component CSS
+   Replaces DaisyUI with self-contained component styles
    ============================================================ */
 
-/* Input focus reset */
-.input:focus {
-    outline: none;
+/* --- Modal --- */
+.modal-toggle {
+    display: none;
+}
+
+.modal {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+
+.modal-toggle:checked ~ .modal {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.modal-box {
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 1.25rem;
+    max-width: 32rem;
+    width: 90vw;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    position: relative;
 }
 
-/* Modal → Glass Panel */
 .dark .modal-box {
     background: rgba(15, 20, 25, 0.85);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
                 0 0 0 1px rgba(255, 255, 255, 0.05);
 }
 
-/* Buttons → Gradient */
-.dark .btn-primary,
-.dark .btn.btn-primary {
-    background: linear-gradient(135deg, lch(52% 70% 250deg), lch(55% 65% 245deg));
+.modal-action {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+/* --- Button --- */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    cursor: pointer;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #374151;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    user-select: none;
+}
+
+.btn:hover {
+    background: #f3f4f6;
+}
+
+.btn:active {
+    transform: scale(0.97);
+}
+
+.btn:disabled,
+.btn[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-sm {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.8125rem;
+}
+
+.btn-xs {
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+}
+
+.btn-circle {
+    border-radius: 9999px;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+}
+
+.btn-sm.btn-circle {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.75rem;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #0066ff, #3b82f6);
     border: 1px solid rgba(0, 102, 255, 0.2);
     color: #ffffff;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.dark .btn-primary:hover,
-.dark .btn.btn-primary:hover {
+.btn-primary:hover {
     transform: translateY(-1px);
-    box-shadow: 0 8px 25px -5px rgba(0, 102, 255, 0.4),
-                0 0 0 1px rgba(0, 102, 255, 0.1);
+    box-shadow: 0 8px 25px -5px rgba(0, 102, 255, 0.4);
+    background: linear-gradient(135deg, #0066ff, #3b82f6);
 }
 
-.dark .btn-primary:active,
-.dark .btn.btn-primary:active {
+.btn-primary:active {
     transform: scale(0.97);
 }
 
+.btn-ghost {
+    background: transparent;
+    border-color: transparent;
+}
+
+.btn-ghost:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.dark .btn-ghost:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.btn-link {
+    background: transparent;
+    border-color: transparent;
+    color: #0066ff;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.btn-link:hover {
+    background: transparent;
+    border-color: transparent;
+    text-decoration-thickness: 2px;
+}
+
 /* Close button (circle btn) */
 .dark .btn.btn-sm.btn-circle {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: #9ca3af;
-    transition: all 0.15s ease;
 }
 
 .dark .btn.btn-sm.btn-circle:hover {
@@ -76,57 +185,407 @@ code, pre, .font-mono {
     color: #e5e7eb;
 }
 
-/* Inputs → Glass Input */
-.dark .input,
-.dark .select,
-.dark .textarea {
+/* --- Form --- */
+.form-control {
+    width: 100%;
+    position: relative;
+}
+
+.label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.25rem 0;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+.label-text {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+}
+
+.dark .label-text {
+    color: #e5e7eb;
+}
+
+.input-group {
+    display: flex;
+    align-items: stretch;
+}
+
+.join {
+    display: flex;
+}
+
+.join-item {
+    border-radius: 0;
+}
+
+.join-item:first-child {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+}
+
+.join-item:last-child {
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+}
+
+.input {
+    width: 100%;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background: #ffffff;
+    color: #111827;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+}
+
+.input:focus {
+    border-color: #0066ff;
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
+}
+
+.input::placeholder {
+    color: #9ca3af;
+}
+
+.dark .input {
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.1);
     color: #e5e7eb;
+}
+
+.dark .input:focus {
+    border-color: #0066ff;
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
+}
+
+.dark .input::placeholder {
+    color: #6b7280;
+}
+
+.select {
+    width: 100%;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background: #ffffff;
+    color: #111827;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+    appearance: auto;
 }
 
-.dark .input:focus,
-.dark .select:focus,
-.dark .textarea:focus {
+.select-bordered {
+    border: 1px solid #d1d5db;
+}
+
+.select:focus {
+    border-color: #0066ff;
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
+}
+
+.dark .select {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+}
+
+.dark .select:focus {
     border-color: #0066ff;
     box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
+}
+
+.textarea {
+    width: 100%;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background: #ffffff;
+    color: #111827;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
     outline: none;
+    resize: vertical;
+}
+
+.textarea:focus {
+    border-color: #0066ff;
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
+}
+
+.textarea::placeholder {
+    color: #9ca3af;
+}
+
+.dark .textarea {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+}
+
+.dark .textarea:focus {
+    border-color: #0066ff;
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
 }
 
-.dark .input::placeholder,
 .dark .textarea::placeholder {
     color: #6b7280;
 }
 
-/* Dropdown → Glass Dropdown */
-.dark .dropdown-content {
-    background: rgba(15, 20, 25, 0.9);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5);
+/* --- Alert --- */
+.alert {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: 0.75rem;
+    font-size: 0.875rem;
+}
+
+.alert-success {
+    background: rgba(63, 182, 139, 0.1);
+    color: #065f46;
+    border: 1px solid rgba(63, 182, 139, 0.2);
+}
+
+.dark .alert-success {
+    background: rgba(63, 182, 139, 0.08);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    color: #6ee7b7;
 }
 
-/* Alert → Glass Alert */
-.dark .alert {
+.alert-error {
+    background: rgba(255, 83, 83, 0.1);
+    color: #991b1b;
+    border: 1px solid rgba(255, 83, 83, 0.2);
+}
+
+.dark .alert-error {
+    background: rgba(255, 83, 83, 0.08);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 12px;
+    color: #fca5a5;
+}
+
+/* --- Toast --- */
+.toast {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 9999;
 }
 
-/* Toast → Glass Toast */
 .dark .toast {
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
 }
 
-/* Card (used in TokenConvert dropdown) */
+/* --- Dropdown --- */
+.dropdown-content {
+    position: absolute;
+    z-index: 50;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.75rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+                0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    padding: 0.5rem;
+}
+
+.dark .dropdown-content {
+    background: rgba(15, 20, 25, 0.9);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5);
+}
+
+.divider {
+    height: 1px;
+    background: #e5e7eb;
+    margin: 0.5rem 0;
+}
+
+.dark .divider {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* --- Card (used in TokenConvert dropdown) --- */
+.card.dropdown-content {
+    background: #ffffff;
+}
+
 .dark .card.dropdown-content {
     background: rgba(15, 20, 25, 0.9);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }
+
+/* --- Loading --- */
+.loading {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #ffffff;
+    border-radius: 9999px;
+    animation: spin 0.6s linear infinite;
+}
+
+.loading-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #ffffff;
+    border-radius: 9999px;
+    animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* --- Checkbox --- */
+.checkbox {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 0.25rem;
+    border: 2px solid #d1d5db;
+    appearance: none;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    position: relative;
+}
+
+.checkbox:checked {
+    background: #0066ff;
+    border-color: #0066ff;
+}
+
+.checkbox:checked::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.35rem;
+    height: 0.6rem;
+    border: solid #ffffff;
+    border-width: 0 2px 2px 0;
+    transform: translate(-50%, -60%) rotate(45deg);
+}
+
+.checkbox-sm {
+    width: 1rem;
+    height: 1rem;
+}
+
+.checkbox-primary {
+    accent-color: #0066ff;
+}
+
+.dark .checkbox {
+    border-color: rgba(255, 255, 255, 0.2);
+    background: transparent;
+}
+
+.dark .checkbox:checked {
+    background: #0066ff;
+    border-color: #0066ff;
+}
+
+/* --- Radio --- */
+.radio {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    border: 2px solid #d1d5db;
+    appearance: none;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    position: relative;
+}
+
+.radio:checked {
+    border-color: #0066ff;
+}
+
+.radio:checked::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: #0066ff;
+    transform: translate(-50%, -50%);
+}
+
+.radio-success:checked {
+    border-color: #3fb68b;
+}
+
+.radio-success:checked::after {
+    background: #3fb68b;
+}
+
+.radio-error:checked {
+    border-color: #ff5353;
+}
+
+.radio-error:checked::after {
+    background: #ff5353;
+}
+
+.radio-dark:checked {
+    border-color: #1e40af;
+}
+
+.radio-dark:checked::after {
+    background: #1e40af;
+}
+
+.dark .radio {
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* --- File Input --- */
+.file-input {
+    width: 100%;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    font-size: 0.875rem;
+    background: #ffffff;
+    color: #111827;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+}
+
+.file-input:focus {
+    border-color: #0066ff;
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
+}
+
+.dark .file-input {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+}

package/lib/main.ts

@@ -1,3 +1,4 @@
+import '../src/styles/design-system.css';
 import './main.css';
 import { createApp, h } from 'vue';
 // @ts-ignore

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mictonode/widget",
     "private": false,
-    "version": "0.3.17",
+    "version": "0.3.18",
     "type": "module",
     "main": "dist/ping-widget.js",
     "author": {
@@ -33,7 +33,6 @@
         "trypublish": "npm publish || true"
     },
     "dependencies": {
-        "cosmjs-types": "0.9.0",
         "@cosmjs/amino": "^0.32.3",
         "@cosmjs/cosmwasm-stargate": "^0.32.3",
         "@cosmjs/ledger-amino": "^0.32.3",
@@ -48,8 +47,8 @@
         "@ping-pub/chain-registry-client": "^0.0.25",
         "@types/bignumber.js": "^5.0.0",
         "buffer": "^6.0.3",
+        "cosmjs-types": "0.9.0",
         "cross-fetch": "^3.1.5",
-        "daisyui": "^3.1.0",
         "dayjs": "^1.11.7",
         "fflate": "^0.8.0",
         "osmojs": "^15.2.1",
@@ -81,4 +80,4 @@
         "vite-plugin-css-injected-by-js": "^3.1.0",
         "vue-tsc": "^1.4.2"
     }
-}
+}

package/src/App.vue

@@ -159,10 +159,10 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
 </script>
 
 <template>
-    <div class="bg-gray-50 dark:bg-[#0f1419]  dark:text-white min-h-[100vh]">
+    <div class="bg-gray-50 dark:bg-surface  dark:text-white min-h-[100vh]">
         Ping Widget Version: {{ pingWidget?.version }}
 
-        <div class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] btn-sm normal-case" @click="switchTheme()">
+        <div class="btn btn-primary btn-sm normal-case" @click="switchTheme()">
             Theme: {{ theme }}
         </div>
 
@@ -182,7 +182,7 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
 
         <br />
 
-        <label :for="toOpen" class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] dark:text-white">{{ toOpen }}</label>
+        <label :for="toOpen" class="btn btn-primary dark:text-white">{{ toOpen }}</label>
         <ping-tx-dialog
             :type="toOpen"
             :sender="conf.sender"
@@ -194,7 +194,7 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
 
         <br />
         // example:<br />
-        <label for="withdraw" class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] dark:text-white">Withdraw</label>
+        <label for="withdraw" class="btn btn-primary dark:text-white">Withdraw</label>
         <ping-tx-dialog
             type="withdraw"
             :sender="conf.sender"
@@ -203,7 +203,7 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
             :params="conf.params"
         ></ping-tx-dialog>
 
-        <label for="store_code" class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] dark:text-white">Store Code</label>
+        <label for="store_code" class="btn btn-primary dark:text-white">Store Code</label>
         <ping-tx-dialog
             type="store_code"
             :sender="conf.sender"
@@ -213,7 +213,7 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
             :params="conf.params"
         ></ping-tx-dialog>
 
-        <label for="PingTokenConvert" class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] dark:text-white">Token Convert</label>
+        <label for="PingTokenConvert" class="btn btn-primary dark:text-white">Token Convert</label>
         <ping-token-convert
             :chain-name="conf.chainName"
             :endpoint="conf.endpoint"