@taskon/widget-react 0.0.1-beta.2 → 0.0.1-beta.4

package/dist/TipPopover.css

@@ -1,210 +0,0 @@
-/**
- * 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/WidgetShell.css

@@ -1,182 +0,0 @@
-/**
- * Dialog 组件样式
- * 基于 Radix UI Dialog 封装
- * 使用 taskon-dialog-* 命名空间
- */
-
-/* ==================== 遮罩层 ==================== */
-.taskon-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9998;
-  /* 复刻 Vue --bg-page-mask-20: rgb(66 66 66 / 50%) */
-  background-color: var(--taskon-color-overlay, rgba(66, 66, 66, 0.5));
-  backdrop-filter: blur(24px);
-
-  /* 动画 */
-  animation: taskon-dialog-overlay-fade-in 150ms ease-out;
-}
-
-.taskon-dialog-overlay[data-state="closed"] {
-  animation: taskon-dialog-overlay-fade-out 150ms ease-in;
-}
-
-@keyframes taskon-dialog-overlay-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes taskon-dialog-overlay-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-/* ==================== 弹窗内容 ==================== */
-.taskon-dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 9999;
-
-  /* 尺寸 */
-  width: 90vw;
-  max-width: 500px;
-  max-height: 85vh;
-
-  /* 样式 - 复刻 Vue --bg-popup-basic-100: #0d0d0d */
-  background-color: var(--taskon-color-bg-popup, #0d0d0d);
-  color: var(--taskon-color-text, #ffffff);
-  border-radius: var(--taskon-border-radius-lg, 16px);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-
-  /* 布局 */
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  /* 移除默认的 focus outline */
-  outline: none;
-
-  /* 动画 */
-  animation: taskon-dialog-content-fade-in 200ms ease-out;
-}
-
-.taskon-dialog-content[data-state="closed"] {
-  animation: taskon-dialog-content-fade-out 150ms ease-in;
-}
-
-@keyframes taskon-dialog-content-fade-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-@keyframes taskon-dialog-content-fade-out {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-}
-
-/* ==================== 无障碍标题/描述（屏幕阅读器可见） ==================== */
-.taskon-dialog-title--sr-only,
-.taskon-dialog-description--sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ==================== 头部操作区 ==================== */
-.taskon-dialog-header {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 1;
-
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.taskon-dialog-header-slot {
-  display: flex;
-  align-items: center;
-}
-
-/* ==================== 关闭按钮 ==================== */
-.taskon-dialog-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 32px;
-  height: 32px;
-  padding: 0;
-
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: var(--taskon-border-radius, 8px);
-  cursor: pointer;
-
-  color: var(--taskon-color-text-secondary, #888);
-  transition: all 0.2s ease;
-}
-
-.taskon-dialog-close:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: var(--taskon-color-text, #fff);
-}
-
-.taskon-dialog-close:focus-visible {
-  outline: 2px solid var(--taskon-color-primary, #3b82f6);
-  outline-offset: 2px;
-}
-
-/* ==================== 主体内容 ==================== */
-.taskon-dialog-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-}
-
-/* ==================== 响应式 ==================== */
-@media (max-width: 750px) {
-  .taskon-dialog-content {
-    width: 95vw;
-    max-height: 90vh;
-    border-radius: var(--taskon-border-radius, 12px);
-  }
-
-  .taskon-dialog-body {
-    padding: 20px;
-  }
-
-  .taskon-dialog-header {
-    top: 12px;
-    right: 12px;
-  }
-}