@taskon/widget-react 0.0.1-beta.1

package/dist/TaskOnProvider.css

@@ -0,0 +1,163 @@
+/**
+ * Toast 组件样式
+ * 遵循 TaskOn Widget 命名规范
+ */
+
+/* ==================== Viewport 容器 ==================== */
+.taskon-toast-viewport {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 320px;
+  max-width: calc(100vw - 40px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  z-index: 999999;
+  outline: none;
+}
+
+/* ==================== Toast 基础样式 ==================== */
+.taskon-toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  background: #1a1a1a;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+/* 动画 */
+.taskon-toast[data-state="open"] {
+  animation: taskon-toast-slide-in 200ms ease-out;
+}
+
+.taskon-toast[data-state="closed"] {
+  animation: taskon-toast-hide 100ms ease-in;
+}
+
+.taskon-toast[data-swipe="move"] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+
+.taskon-toast[data-swipe="cancel"] {
+  transform: translateX(0);
+  transition: transform 200ms ease-out;
+}
+
+.taskon-toast[data-swipe="end"] {
+  animation: taskon-toast-swipe-out 100ms ease-out;
+}
+
+@keyframes taskon-toast-slide-in {
+  from {
+    transform: translateX(calc(100% + 20px));
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes taskon-toast-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes taskon-toast-swipe-out {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + 20px));
+  }
+}
+
+/* ==================== Toast 图标 ==================== */
+.taskon-toast-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+/* ==================== Toast 消息 ==================== */
+.taskon-toast-message {
+  flex: 1;
+  margin: 0;
+}
+
+/* ==================== Toast 类型变体 ==================== */
+
+/* Success */
+.taskon-toast--success {
+  border-left: 3px solid #00ffa3;
+}
+
+.taskon-toast--success .taskon-toast-icon {
+  background: rgba(0, 255, 163, 0.2);
+  color: #00ffa3;
+}
+
+/* Error */
+.taskon-toast--error {
+  border-left: 3px solid #eb5757;
+}
+
+.taskon-toast--error .taskon-toast-icon {
+  background: rgba(235, 87, 87, 0.2);
+  color: #eb5757;
+}
+
+/* Warning */
+.taskon-toast--warning {
+  border-left: 3px solid #f2c94c;
+}
+
+.taskon-toast--warning .taskon-toast-icon {
+  background: rgba(242, 201, 76, 0.2);
+  color: #f2c94c;
+}
+
+/* Info */
+.taskon-toast--info {
+  border-left: 3px solid #2f80ed;
+}
+
+.taskon-toast--info .taskon-toast-icon {
+  background: rgba(47, 128, 237, 0.2);
+  color: #2f80ed;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-toast-viewport {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    width: auto;
+    max-width: none;
+  }
+
+  .taskon-toast {
+    padding: 12px 14px;
+    font-size: 13px;
+  }
+}

package/dist/TipPopover.css

@@ -0,0 +1,210 @@
+/**
+ * Input 通用组件样式
+ * @description 复刻 Vue 版本 BaseInputPro.vue 样式
+ * 使用 taskon-input 命名空间
+ */
+
+/* ==================== 输入框 ==================== */
+.taskon-input {
+  width: 100%;
+  height: 40px;
+  padding: 0 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--taskon-color-text, #fff);
+  font-size: 14px;
+  line-height: 40px;
+  letter-spacing: 0.04em;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.taskon-input:focus {
+  border-color: var(--taskon-color-primary, #cbff01);
+}
+
+.taskon-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.taskon-input--error {
+  border-color: #eb5757;
+}
+
+.taskon-input::placeholder {
+  color: var(--taskon-color-text-tertiary, #666);
+  font-weight: 400;
+}
+
+/* ==================== 包装器（用于 rightSlot 和 error） ==================== */
+.taskon-input-wrapper {
+  width: 100%;
+}
+
+/* ==================== 容器（包含输入框和右侧插槽） ==================== */
+.taskon-input-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.04);
+  transition: border-color 0.2s;
+}
+
+.taskon-input-container:focus-within {
+  border-color: var(--taskon-color-primary, #cbff01);
+}
+
+.taskon-input-container--error {
+  border-color: #eb5757;
+}
+
+/* 容器内的输入框样式重置 */
+.taskon-input--in-container {
+  flex: 1;
+  border: none;
+  background: transparent;
+  border-radius: 0;
+}
+
+.taskon-input--in-container:focus {
+  border-color: transparent;
+}
+
+/* ==================== 右侧插槽 ==================== */
+.taskon-input-slot {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* MAX 按钮样式（通用样式） */
+.taskon-input-slot button {
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--taskon-color-primary, #cbff01);
+  background: transparent;
+  border: 1px solid var(--taskon-color-primary, #cbff01);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.taskon-input-slot button:hover:not(:disabled) {
+  background: rgba(203, 255, 1, 0.1);
+}
+
+.taskon-input-slot button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ==================== 错误信息 ==================== */
+.taskon-input-error {
+  margin: 4px 0 0 0;
+  font-size: 12px;
+  color: #eb5757;
+  line-height: 1.4;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-input {
+    height: 10.667vw;
+    padding: 0 3.2vw;
+    font-size: 3.733vw;
+    line-height: 10.667vw;
+  }
+
+  .taskon-input-container {
+    padding-right: 3.2vw;
+    gap: 2.133vw;
+  }
+
+  .taskon-input-slot button {
+    padding: 1.067vw 2.133vw;
+    font-size: 3.2vw;
+  }
+
+  .taskon-input-error {
+    margin-top: 1.067vw;
+    font-size: 3.2vw;
+  }
+}
+/**
+ * TipPopover 组件样式
+ * 设计原则：组件内部不包含 margin，需要间距由外部控制
+ */
+
+.taskon-tip-popover-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.4));
+  outline: none;
+}
+
+.taskon-tip-popover-trigger:hover,
+.taskon-tip-popover-trigger:focus {
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.4));
+  background: transparent;
+  outline: none;
+}
+
+/* Custom children trigger - reset button styles */
+.taskon-tip-popover-trigger--custom {
+  cursor: pointer;
+}
+
+.taskon-tip-popover-content {
+  max-width: 266px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  background: var(--taskon-bg-elevated, #2a2a2a);
+  color: var(--taskon-text-primary, #fff);
+  font-size: 13px;
+  line-height: 1.5;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  /* z-index 需要大于 Dialog (9999) 才能在弹窗中正常显示 */
+  z-index: 10000;
+  animation: taskon-tip-popover-fade-in 0.15s ease;
+}
+
+.taskon-tip-popover-content:focus {
+  outline: none;
+}
+
+.taskon-tip-popover-arrow {
+  fill: var(--taskon-bg-elevated, #2a2a2a);
+}
+
+@keyframes taskon-tip-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Mobile styles */
+@media (max-width: 750px) {
+  .taskon-tip-popover-content {
+    max-width: 60vw;
+    padding: 2.5vw 3.5vw;
+    font-size: 3vw;
+  }
+}

package/dist/UserCenterWidget.css

@@ -0,0 +1,297 @@
+/**
+ * Tabs 组件样式
+ *
+ * 命名规范: .taskon-tabs-[element]--[modifier]
+ * 基于 Figma UserCenter 设计规范
+ */
+
+/* ========== 容器 ========== */
+.taskon-tabs {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ========== Tab 列表 ========== */
+.taskon-tabs__list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--taskon-tabs-gap, 40px);
+}
+
+/* ========== Tab 项 ========== */
+.taskon-tabs__tab {
+  position: relative;
+  padding: 0;
+  padding-bottom: 9px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  /* Typography: 16px Medium */
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  white-space: nowrap;
+
+  /* 默认颜色: text-light (60% 白色) */
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.taskon-tabs__tab:hover:not(.taskon-tabs__tab--disabled) {
+  color: var(--taskon-color-text-light-hover, rgba(255, 255, 255, 0.8));
+}
+
+/* 激活状态: 更粗字体 + 白色 */
+.taskon-tabs__tab--active {
+  font-weight: 600;
+  color: var(--taskon-color-text, white);
+}
+
+/* 禁用状态 */
+.taskon-tabs__tab--disabled {
+  color: var(--taskon-color-text-disabled, rgba(255, 255, 255, 0.3));
+  cursor: not-allowed;
+}
+
+/* ========== 下划线指示器 ========== */
+.taskon-tabs__indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  /* 渐变色：蓝色 -> 绿色（基于 Figma 设计 Brand/primary -> Brand/secondary） */
+  background: linear-gradient(90deg, #2771ff 0%, #1fcbaf 100%);
+  border-radius: 1px;
+  transition: transform 0.25s ease, width 0.25s ease;
+}
+/**
+ * AssetImage 组件样式
+ */
+
+.taskon-asset-image {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.taskon-asset-image__main {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.taskon-asset-image__placeholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  background-color: var(--taskon-bg-secondary, #f0f0f0);
+}
+
+.taskon-asset-image__chain {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--taskon-bg-primary, #fff);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+/**
+ * EmailBindDialog 样式
+ */
+
+.taskon-email-bind-dialog {
+  padding: 8px 0;
+}
+
+.taskon-email-bind-dialog__title {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  color: var(--taskon-color-text, #fff);
+  margin: 0 0 24px 0;
+}
+
+.taskon-email-bind-dialog__field {
+  margin-bottom: 20px;
+}
+
+.taskon-email-bind-dialog__label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-color-text, #fff);
+  margin-bottom: 8px;
+}
+
+.taskon-email-bind-dialog__actions {
+  margin-top: 24px;
+}
+
+/* 响应式 - 移动端 */
+@media (max-width: 750px) {
+  .taskon-email-bind-dialog__title {
+    font-size: 18px;
+    line-height: 24px;
+    margin-bottom: 16px;
+  }
+
+  .taskon-email-bind-dialog__field {
+    margin-bottom: 16px;
+  }
+
+  .taskon-email-bind-dialog__label {
+    font-size: 13px;
+    margin-bottom: 6px;
+  }
+
+  .taskon-email-bind-dialog__actions {
+    margin-top: 20px;
+  }
+}
+/**
+ * ClaimNftDialog 样式
+ */
+
+.taskon-claim-dialog {
+  max-width: 400px;
+}
+
+.taskon-claim-dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+  text-align: center;
+}
+
+/* NFT 图片 */
+.taskon-claim-dialog-nft {
+  margin-bottom: 20px;
+}
+
+.taskon-claim-dialog-nft__image {
+  width: 120px;
+  height: 120px;
+  border-radius: 12px;
+  object-fit: cover;
+}
+
+/* 状态图标区域 */
+.taskon-claim-dialog-status {
+  margin-bottom: 16px;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 加载动画 */
+.taskon-claim-dialog-spinner {
+  width: 48px;
+  height: 48px;
+  position: relative;
+}
+
+.taskon-claim-dialog-spinner__circle {
+  width: 100%;
+  height: 100%;
+  border: 3px solid var(--taskon-border-color, #e5e5e5);
+  border-top-color: var(--taskon-primary-color, #6366f1);
+  border-radius: 50%;
+  animation: taskon-claim-spin 0.8s linear infinite;
+}
+
+@keyframes taskon-claim-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 状态图标 */
+.taskon-claim-dialog-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.taskon-claim-dialog-icon--success {
+  color: var(--taskon-success-color, #22c55e);
+}
+
+.taskon-claim-dialog-icon--error {
+  color: var(--taskon-error-color, #ef4444);
+}
+
+/* 状态消息 */
+.taskon-claim-dialog-message {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--taskon-text-color, #1a1a1a);
+  margin: 0 0 16px;
+  line-height: 1.5;
+}
+
+/* 交易 Hash */
+.taskon-claim-dialog-tx {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--taskon-bg-secondary, #f5f5f5);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+
+.taskon-claim-dialog-tx__label {
+  color: var(--taskon-text-secondary, #666);
+}
+
+.taskon-claim-dialog-tx__hash {
+  color: var(--taskon-text-color, #1a1a1a);
+  font-family: monospace;
+}
+
+/* 操作按钮 */
+.taskon-claim-dialog-actions {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  justify-content: center;
+}
+
+.taskon-claim-dialog-btn {
+  padding: 10px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+}
+
+.taskon-claim-dialog-btn--primary {
+  background: var(--taskon-primary-color, #6366f1);
+  color: white;
+}
+
+.taskon-claim-dialog-btn--primary:hover {
+  background: var(--taskon-primary-hover, #4f46e5);
+}
+
+.taskon-claim-dialog-btn--secondary {
+  background: transparent;
+  color: var(--taskon-primary-color, #6366f1);
+  border: 1px solid var(--taskon-primary-color, #6366f1);
+}
+
+.taskon-claim-dialog-btn--secondary:hover {
+  background: var(--taskon-primary-color, #6366f1);
+  color: white;
+}