knight-ui 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "knight-ui",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "基于React的Knight-ui前端UI组件库",
     "main": "index.js",
     "module": "index.js",
@@ -16,9 +16,12 @@
             "import": "./index.js",
             "require": "./index.js",
             "default": "./index.js"
-        }
+        },
+        "./tokens/tokens.css": "./tokens/tokens.css"
     },
-    "sideEffects": false,
+    "sideEffects": [
+        "**/*.css"
+    ],
     "peerDependencies": {
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0"

package/test/index.d.ts

@@ -1 +1 @@
-import "../component/_tokens/tokens.css";
+import "../component/tokens/tokens.css";

package/tokens/tokens.css

@@ -0,0 +1,497 @@
+/* ===== Knight UI 设计 Token ===== */
+/* Design Token 体系. */
+
+:root {
+    /* ---- 基础色 ---- */
+    --ku-grey-9: 249, 249, 249;
+    --ku-white: 255, 255, 255;
+    --ku-black: 0, 0, 0;
+
+    /* ---- 主色 ---- */
+    --ku-color-primary: #8b5cf6;
+    --ku-color-primary-hover: #a78bfa;
+    --ku-color-primary-active: #7c3aed;
+    --ku-color-primary-disabled: #5b3e9e;
+    --ku-color-primary-light-default: rgba(139, 92, 246, 0.08);
+    --ku-color-primary-light-hover: rgba(139, 92, 246, 0.15);
+    --ku-color-primary-light-active: rgba(139, 92, 246, 0.2);
+
+    /* ---- 语义色 ---- */
+    --ku-color-success: #22c55e;
+    --ku-color-warning: #f59e0b;
+    --ku-color-danger: #ef4444;
+    --ku-color-info: #3b82f6;
+
+    /* ---- 文字色 ---- */
+    --ku-color-text-0: rgba(var(--ku-grey-9), 1);
+    --ku-color-text-1: rgba(var(--ku-grey-9), 0.8);
+    --ku-color-text-2: rgba(var(--ku-grey-9), 0.62);
+    --ku-color-text-3: rgba(var(--ku-grey-9), 0.35);
+
+    /* ---- 背景色 ---- */
+    --ku-color-bg-0: #0a0a14;
+    --ku-color-bg-1: #12121e;
+    --ku-color-bg-2: #16162a;
+    --ku-color-bg-3: #1e1e32;
+    --ku-color-bg-4: #2a2a3e;
+
+    /* ---- 填充色 ---- */
+    --ku-color-fill-0: #111122;
+    --ku-color-fill-1: #282840;
+    --ku-color-fill-2: #323250;
+
+    /* ---- 边框 ---- */
+    --ku-color-border: rgba(var(--ku-white), 0.08);
+
+    /* ---- 链接 ---- */
+    --ku-color-link: #8b5cf6;
+    --ku-color-link-hover: #a78bfa;
+    --ku-color-link-active: #7c3aed;
+
+    /* ---- 禁用 ---- */
+    --ku-color-disabled-text: rgba(var(--ku-grey-9), 0.35);
+    --ku-color-disabled-border: transparent;
+    --ku-color-disabled-bg: rgba(var(--ku-grey-9), 0.04);
+    --ku-color-disabled-fill: rgba(var(--ku-grey-9), 0.04);
+
+    /* ---- 阴影 ---- */
+    --ku-color-shadow: rgba(var(--ku-black), 0.04);
+    --ku-shadow-elevated: 0 0 1px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.1);
+
+    /* ---- 字号 ---- */
+    --ku-font-size-xs: 10px;
+    --ku-font-size-sm: 11px;
+    --ku-font-size-base: 12px;
+    --ku-font-size-md: 13px;
+    --ku-font-size-lg: 14px;
+    --ku-font-size-xl: 16px;
+    --ku-font-size-2xl: 18px;
+    --ku-font-size-3xl: 20px;
+    --ku-font-size-4xl: 24px;
+
+    /* ---- 圆角 ---- */
+    --ku-radius-xs: 2px;
+    --ku-radius-sm: 3px;
+    --ku-radius-base: 4px;
+    --ku-radius-md: 6px;
+    --ku-radius-lg: 8px;
+    --ku-radius-xl: 10px;
+
+    /* ---- 间距 ---- */
+    --ku-spacing-xs: 2px;
+    --ku-spacing-sm: 4px;
+    --ku-spacing-base: 8px;
+    --ku-spacing-md: 12px;
+    --ku-spacing-lg: 16px;
+    --ku-spacing-xl: 20px;
+
+    /* ---- z-index ---- */
+    --ku-z-mask: 1000;
+    --ku-z-overlay: 1010;
+    --ku-z-modal: 1020;
+    --ku-z-toast: 1030;
+
+    /* ---- 过渡 ---- */
+    --ku-transition-fast: 100ms ease;
+    --ku-transition-base: 200ms ease;
+    --ku-transition-slow: 300ms ease;
+
+    /* ---- 组件通用 ---- */
+    --ku-font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+/* ===== 亮色主题覆盖 ===== */
+
+:root[data-ku-theme="light"] {
+    --ku-grey-9: 28, 31, 35;
+    --ku-color-bg-0: #f0f2f5;
+    --ku-color-bg-1: #f7f8fa;
+    --ku-color-bg-2: #ffffff;
+    --ku-color-bg-3: #e7eaf0;
+    --ku-color-bg-4: #dce0e6;
+    --ku-color-fill-0: #f4f4f5;
+    --ku-color-fill-1: #ebebed;
+    --ku-color-fill-2: #e2e2e5;
+    --ku-color-border: rgba(var(--ku-grey-9), 0.08);
+}
+
+/* ===== 动画关键帧 ===== */
+
+@keyframes ku-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* ===== 全局交互基类 ===== */
+
+/* 可聚焦元素焦点环 */
+.ku-focus-ring:focus-visible,
+.ku-select-trigger:focus-visible,
+.ku-input-core:focus-visible,
+.ku-dropdown button:focus-visible {
+    outline: 2px solid var(--ku-color-primary);
+    outline-offset: 1px;
+}
+
+/* 通用禁用态 */
+.ku-disabled {
+    pointer-events: none !important;
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+}
+
+/* 通用按钮基础 */
+.ku-btn-base {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ku-spacing-sm);
+    font-family: var(--ku-font-family);
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: background-color var(--ku-transition-fast),
+                color var(--ku-transition-fast),
+                box-shadow var(--ku-transition-fast),
+                filter var(--ku-transition-fast);
+}
+
+.ku-btn-base:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+/* ===== Button 按钮 ===== */
+
+.ku-button {
+    border-radius: var(--ku-radius-base);
+    transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+.ku-button:hover:not(:disabled) {
+    filter: brightness(1.3);
+}
+.ku-button:active:not(:disabled) {
+    filter: brightness(0.75);
+}
+.ku-button:focus-visible {
+    outline: 2px solid var(--ku-color-primary);
+    outline-offset: 2px;
+}
+
+/* ===== FloatButton 悬浮按钮 ===== */
+
+.ku-float-button {
+    box-shadow: var(--ku-shadow-elevated);
+    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+}
+.ku-float-button:hover {
+    transform: scale(1.08);
+    box-shadow: 0 0 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.15);
+}
+.ku-float-button:active {
+    transform: scale(0.95);
+}
+
+/* ===== Input 输入框 ===== */
+
+.ku-input:hover {
+    border-color: var(--ku-color-primary-hover);
+}
+.ku-input:focus-within {
+    border-color: var(--ku-color-primary);
+    box-shadow: 0 0 0 2px var(--ku-color-primary-light-default);
+}
+
+/* ===== InputNumber 数字输入 ===== */
+
+.ku-input-number button:hover:not(:disabled) {
+    background-color: var(--ku-color-fill-1);
+}
+.ku-input-number button:active:not(:disabled) {
+    background-color: var(--ku-color-fill-2);
+}
+
+/* ===== Select 选择器 ===== */
+
+.ku-select { position: relative; }
+.ku-select-trigger {
+    cursor: pointer;
+    transition: border-color var(--ku-transition-fast), box-shadow var(--ku-transition-fast);
+}
+.ku-select-trigger:hover { border-color: var(--ku-color-primary-hover); }
+.ku-select-option {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast);
+}
+.ku-select-option:hover { background-color: var(--ku-color-fill-0); }
+.ku-select-option.ku-selected {
+    color: var(--ku-color-primary);
+    background-color: var(--ku-color-primary-light-default);
+}
+
+/* ===== Dropdown 下拉菜单 ===== */
+
+.ku-dropdown-item {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast);
+}
+.ku-dropdown-item:hover:not(.ku-dropdown-item-disabled) {
+    background-color: var(--ku-color-fill-0);
+}
+
+/* ===== Modal 对话框 ===== */
+
+.ku-modal-close:hover {
+    background-color: var(--ku-color-fill-1);
+    color: var(--ku-color-text-0);
+}
+.ku-modal-btn:hover {
+    background-color: var(--ku-color-fill-1);
+}
+.ku-modal-btn-primary:hover {
+    filter: brightness(1.2);
+}
+.ku-modal-btn-primary:active {
+    filter: brightness(0.85);
+}
+
+/* ===== Switch 开关 ===== */
+
+.ku-switch {
+    transition: background-color var(--ku-transition-base);
+    cursor: pointer;
+}
+.ku-switch:hover { opacity: 0.9; }
+.ku-switch:active { transform: none; }
+.ku-switch-knob {
+    transition: transform var(--ku-transition-base);
+}
+
+/* ===== Checkbox / Radio 复选框/单选框 ===== */
+
+.ku-checkbox, .ku-radio {
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+}
+.ku-checkbox:hover .ku-checkbox-box,
+.ku-radio:hover .ku-radio-box {
+    border-color: var(--ku-color-primary);
+}
+
+/* ===== Slider 滑块 ===== */
+
+.ku-slider-track { cursor: pointer; }
+.ku-slider-handle {
+    cursor: grab;
+    transition: box-shadow var(--ku-transition-fast), transform var(--ku-transition-fast);
+}
+.ku-slider-handle:hover { transform: scale(1.15); }
+.ku-slider-handle:active { cursor: grabbing; transform: scale(1.05); }
+
+/* ===== Rating 评分 ===== */
+
+.ku-rating-star {
+    cursor: pointer;
+    transition: transform var(--ku-transition-fast), color var(--ku-transition-fast);
+}
+.ku-rating-star:hover { transform: scale(1.2); }
+
+/* ===== Tag 标签 ===== */
+
+.ku-tag {
+    transition: background-color var(--ku-transition-fast);
+}
+.ku-tag.ku-tag-closable .ku-tag-close {
+    cursor: pointer;
+    transition: color var(--ku-transition-fast);
+}
+.ku-tag .ku-tag-close:hover {
+    color: var(--ku-color-text-0);
+}
+
+/* ===== Tabs 选项卡 ===== */
+
+.ku-tabs-tab {
+    cursor: pointer;
+    transition: color var(--ku-transition-fast), border-color var(--ku-transition-fast);
+}
+.ku-tabs-tab:hover { color: var(--ku-color-primary); }
+.ku-tabs-tab.ku-active { color: var(--ku-color-primary); }
+
+/* ===== Collapse 折叠面板 ===== */
+
+.ku-collapse-header {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast);
+}
+.ku-collapse-header:hover { background-color: var(--ku-color-fill-0); }
+
+/* ===== Breadcrumb 面包屑 ===== */
+
+.ku-breadcrumb-item {
+    cursor: pointer;
+    transition: color var(--ku-transition-fast);
+}
+.ku-breadcrumb-item:hover { color: var(--ku-color-primary); }
+
+/* ===== Pagination 分页 ===== */
+
+.ku-pagination-item {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast), color var(--ku-transition-fast);
+}
+.ku-pagination-item:hover:not(.ku-pagination-active) { background-color: var(--ku-color-fill-0); }
+.ku-pagination-item.ku-pagination-active {
+    background-color: var(--ku-color-primary);
+    color: #fff;
+}
+
+/* ===== Tree 树 ===== */
+
+.ku-tree-node {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast);
+}
+.ku-tree-node:hover { background-color: var(--ku-color-fill-0); }
+.ku-tree-node.ku-selected { background-color: var(--ku-color-primary-light-default); }
+
+/* ===== Steps 步骤条 ===== */
+
+.ku-steps-item { cursor: pointer; }
+
+/* ===== Timeline 时间轴 ===== */
+
+.ku-timeline-item { transition: color var(--ku-transition-fast); }
+
+/* ===== Card 卡片 ===== */
+
+.ku-card:hover { box-shadow: var(--ku-shadow-elevated); }
+.ku-card { transition: box-shadow var(--ku-transition-base); }
+
+/* ===== Avatar 头像 ===== */
+
+.ku-avatar { flex-shrink: 0; }
+
+/* ===== Badge 徽标 ===== */
+
+.ku-badge {
+    position: relative;
+    display: inline-flex;
+}
+
+/* ===== Table 表格 ===== */
+
+.ku-table-row { transition: background-color var(--ku-transition-fast); }
+.ku-table-row:hover { background-color: var(--ku-color-fill-0); }
+.ku-table-sort { cursor: pointer; }
+.ku-table-sort:hover { color: var(--ku-color-primary); }
+
+/* ===== Calendar 日历 ===== */
+
+.ku-calendar-cell {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast);
+}
+.ku-calendar-cell:hover:not(.ku-calendar-cell-disabled) {
+    background-color: var(--ku-color-fill-0);
+}
+.ku-calendar-cell.ku-calendar-cell-today {
+    color: var(--ku-color-primary);
+    font-weight: 700;
+}
+.ku-calendar-cell.ku-calendar-cell-selected {
+    background-color: var(--ku-color-primary);
+    color: #fff;
+}
+
+/* ===== Carousel 轮播 ===== */
+
+.ku-carousel-dot {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast), width var(--ku-transition-fast);
+}
+
+/* ===== Sidebar 侧边栏 ===== */
+
+.ku-sidebar-item {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast), color var(--ku-transition-fast);
+}
+.ku-sidebar-item:hover { background-color: var(--ku-color-fill-0); }
+.ku-sidebar-item.ku-sidebar-active {
+    color: var(--ku-color-primary);
+    background-color: var(--ku-color-primary-light-default);
+}
+
+/* ===== Navigation 导航 ===== */
+
+.ku-nav-item {
+    cursor: pointer;
+    transition: background-color var(--ku-transition-fast), color var(--ku-transition-fast);
+}
+.ku-nav-item:hover { background-color: var(--ku-color-fill-0); }
+.ku-nav-item.ku-nav-active {
+    color: var(--ku-color-primary);
+    background-color: var(--ku-color-primary-light-default);
+}
+
+/* ===== Toast 轻提示 ===== */
+
+.ku-toast-item { pointer-events: auto; cursor: pointer; }
+
+/* ===== Banner 横幅 ===== */
+
+.ku-banner-close {
+    cursor: pointer;
+    transition: color var(--ku-transition-fast), background-color var(--ku-transition-fast);
+}
+.ku-banner-close:hover {
+    color: var(--ku-color-text-0);
+    background-color: var(--ku-color-fill-0);
+}
+
+/* ===== Resizable 拖拽把手 ===== */
+
+.ku-resizable-handle {
+    position: absolute;
+    z-index: 10;
+}
+
+/* ===== Layout Sider 触发按钮 ===== */
+
+.ku-layout-sider-trigger {
+    cursor: pointer;
+    text-align: center;
+    padding: 8px 0;
+    border-top: 1px solid var(--ku-color-border);
+    background-color: var(--ku-color-bg-2);
+    transition: background-color var(--ku-transition-fast);
+}
+.ku-layout-sider-trigger:hover {
+    background-color: var(--ku-color-bg-3);
+}
+
+/* ===== 移除原生控件样式 ===== */
+
+.ku-input-number input[type="number"]::-webkit-inner-spin-button,
+.ku-input-number input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.ku-input-number input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+/* ===== 滚动条美化 ===== */
+
+.ku-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
+.ku-scrollbar::-webkit-scrollbar-track { background: transparent; }
+.ku-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--ku-color-fill-2);
+    border-radius: 4px;
+}
+.ku-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--ku-color-fill-1);
+}