wssf-kage-ui 0.1.0 → 0.1.2

package/dist/esm/Badge/style.less

@@ -0,0 +1,237 @@
+// Badge 徽章组件样式
+
+@prefix: kage-badge;
+
+// 颜色变量
+@badge-color: #ff4d4f;
+@badge-text-color: #fff;
+@badge-font-size: 12px;
+@badge-dot-size: 6px;
+@badge-height: 20px;
+@badge-status-dot-size: 6px;
+
+// 状态颜色
+@badge-success: #52c41a;
+@badge-processing: #1890ff;
+@badge-default: #d9d9d9;
+@badge-error: #ff4d4f;
+@badge-warning: #faad14;
+
+// ============ 基础样式 ============
+.@{prefix} {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 徽章数字 ============
+.@{prefix}-count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  transform-origin: 100% 0;
+  z-index: 10;
+  min-width: @badge-height;
+  height: @badge-height;
+  padding: 0 6px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  font-weight: 400;
+  line-height: @badge-height;
+  text-align: center;
+  border-radius: 10px;
+  white-space: nowrap;
+  box-shadow: 0 0 0 1px #fff;
+  transition: all 0.3s ease;
+}
+
+// ============ 小红点 ============
+.@{prefix}-dot {
+  min-width: @badge-dot-size;
+  width: @badge-dot-size;
+  height: @badge-dot-size;
+  padding: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px #fff;
+}
+
+// ============ 隐藏状态 ============
+.@{prefix}-hidden {
+  display: none;
+}
+
+// ============ 独立徽章 ============
+.@{prefix}-standalone {
+  display: inline-block;
+  min-width: @badge-height;
+  height: @badge-height;
+  padding: 0 6px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  line-height: @badge-height;
+  text-align: center;
+  border-radius: 10px;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+
+  &.@{prefix}-dot {
+    min-width: @badge-dot-size;
+    width: @badge-dot-size;
+    height: @badge-dot-size;
+    padding: 0;
+    border-radius: 50%;
+  }
+}
+
+// ============ 状态点 ============
+.@{prefix}-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  line-height: inherit;
+  vertical-align: baseline;
+}
+
+.@{prefix}-status-dot {
+  position: relative;
+  display: inline-block;
+  width: @badge-status-dot-size;
+  height: @badge-status-dot-size;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.@{prefix}-status-text {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+// 状态点颜色
+.@{prefix}-status-success .@{prefix}-status-dot {
+  background: @badge-success;
+}
+
+.@{prefix}-status-processing .@{prefix}-status-dot {
+  background: @badge-processing;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid @badge-processing;
+    border-radius: 50%;
+    animation: badgeProcessing 1.2s infinite ease-in-out;
+  }
+}
+
+@keyframes badgeProcessing {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+.@{prefix}-status-default .@{prefix}-status-dot {
+  background: @badge-default;
+}
+
+.@{prefix}-status-error .@{prefix}-status-dot {
+  background: @badge-error;
+}
+
+.@{prefix}-status-warning .@{prefix}-status-dot {
+  background: @badge-warning;
+}
+
+// ============ Badge.Ribbon 缎带 ============
+.@{prefix}-ribbon-wrapper {
+  position: relative;
+}
+
+.@{prefix}-ribbon {
+  position: absolute;
+  top: 8px;
+  height: 22px;
+  padding: 0 8px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  line-height: 22px;
+  white-space: nowrap;
+  border-radius: 2px;
+  z-index: 10;
+}
+
+.@{prefix}-ribbon-text {
+  color: @badge-text-color;
+}
+
+.@{prefix}-ribbon-corner {
+  position: absolute;
+  top: 100%;
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+  filter: brightness(0.75);
+  clip-path: polygon(0 0, 100% 100%, 100% 0);
+}
+
+// 缎带位置
+.@{prefix}-ribbon-end {
+  right: -8px;
+  border-bottom-right-radius: 0;
+
+  .@{prefix}-ribbon-corner {
+    right: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.@{prefix}-ribbon-start {
+  left: -8px;
+  border-bottom-left-radius: 0;
+
+  .@{prefix}-ribbon-corner {
+    left: 0;
+    transform: scaleX(-1);
+    border-bottom-left-radius: 0;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-count,
+  .@{prefix}-standalone {
+    box-shadow: 0 0 0 1px #1f1f1f;
+  }
+
+  .@{prefix}-dot {
+    box-shadow: 0 0 0 1px #1f1f1f;
+  }
+
+  .@{prefix}-status-text {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-status-default .@{prefix}-status-dot {
+    background: #434343;
+  }
+}
+

package/dist/esm/Breadcrumb/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import './style.less';
+export interface BreadcrumbItemType {
+    /** 唯一标识 */
+    key?: string;
+    /** 链接地址 */
+    href?: string;
+    /** 显示文字 */
+    title: React.ReactNode;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 点击回调 */
+    onClick?: (e: React.MouseEvent) => void;
+    /** 下拉菜单项 */
+    menu?: {
+        items: {
+            key: string;
+            title: React.ReactNode;
+            href?: string;
+            onClick?: () => void;
+        }[];
+    };
+    /** 自定义类名 */
+    className?: string;
+}
+export interface BreadcrumbItemProps extends BreadcrumbItemType {
+    /** 子元素 */
+    children?: React.ReactNode;
+}
+export declare const BreadcrumbItem: React.FC<BreadcrumbItemProps>;
+export interface BreadcrumbSeparatorProps {
+    children?: React.ReactNode;
+}
+export declare const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps>;
+export interface BreadcrumbProps {
+    /** 面包屑配置项 */
+    items?: BreadcrumbItemType[];
+    /** 分隔符 */
+    separator?: React.ReactNode;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps> & {
+    Item: typeof BreadcrumbItem;
+    Separator: typeof BreadcrumbSeparator;
+};
+export default Breadcrumb;

package/dist/esm/Breadcrumb/index.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import "./style.less";
+
+// ============ Breadcrumb Item ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var BreadcrumbItem = function BreadcrumbItem(_ref) {
+  var href = _ref.href,
+    title = _ref.title,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
+  var content = children || /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon && /*#__PURE__*/_jsx("span", {
+      className: "kage-breadcrumb-icon",
+      children: icon
+    }), title]
+  });
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+  if (href) {
+    return /*#__PURE__*/_jsx("a", {
+      href: href,
+      className: "kage-breadcrumb-link ".concat(className),
+      onClick: handleClick,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx("span", {
+    className: "kage-breadcrumb-link ".concat(className),
+    onClick: handleClick,
+    children: content
+  });
+};
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+// ============ Breadcrumb Separator ============
+
+export var BreadcrumbSeparator = function BreadcrumbSeparator(_ref2) {
+  var _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? '/' : _ref2$children;
+  return /*#__PURE__*/_jsx("span", {
+    className: "kage-breadcrumb-separator",
+    children: children
+  });
+};
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+// ============ Breadcrumb ============
+
+export var Breadcrumb = function Breadcrumb(_ref3) {
+  var items = _ref3.items,
+    _ref3$separator = _ref3.separator,
+    separator = _ref3$separator === void 0 ? '/' : _ref3$separator,
+    children = _ref3.children,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? '' : _ref3$className,
+    style = _ref3.style;
+  var classNames = ['kage-breadcrumb', className].filter(Boolean).join(' ');
+
+  // 如果有 items 配置，使用配置渲染
+  if (items && items.length > 0) {
+    return /*#__PURE__*/_jsx("nav", {
+      className: classNames,
+      style: style,
+      "aria-label": "breadcrumb",
+      children: /*#__PURE__*/_jsx("ol", {
+        className: "kage-breadcrumb-list",
+        children: items.map(function (item, index) {
+          var isLast = index === items.length - 1;
+          var key = item.key || index;
+          return /*#__PURE__*/_jsxs("li", {
+            className: "kage-breadcrumb-item",
+            children: [/*#__PURE__*/_jsx(BreadcrumbItem, {
+              href: isLast ? undefined : item.href,
+              title: item.title,
+              icon: item.icon,
+              onClick: item.onClick,
+              className: isLast ? 'kage-breadcrumb-link-current' : ''
+            }), !isLast && /*#__PURE__*/_jsx(BreadcrumbSeparator, {
+              children: separator
+            })]
+          }, key);
+        })
+      })
+    });
+  }
+
+  // 使用 children 渲染
+  var childArray = React.Children.toArray(children);
+  return /*#__PURE__*/_jsx("nav", {
+    className: classNames,
+    style: style,
+    "aria-label": "breadcrumb",
+    children: /*#__PURE__*/_jsx("ol", {
+      className: "kage-breadcrumb-list",
+      children: childArray.map(function (child, index) {
+        var _child$type;
+        var isLast = index === childArray.length - 1;
+
+        // 如果是 Separator，直接渲染
+        if ( /*#__PURE__*/React.isValidElement(child) && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'BreadcrumbSeparator') {
+          return child;
+        }
+        return /*#__PURE__*/_jsxs("li", {
+          className: "kage-breadcrumb-item",
+          children: [/*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+            className: "".concat(child.props.className || '', " ").concat(isLast ? 'kage-breadcrumb-link-current' : '').trim()
+          }) : child, !isLast && /*#__PURE__*/_jsx(BreadcrumbSeparator, {
+            children: separator
+          })]
+        }, index);
+      })
+    })
+  });
+};
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Separator = BreadcrumbSeparator;
+Breadcrumb.displayName = 'Breadcrumb';
+export default Breadcrumb;

package/dist/esm/Breadcrumb/style.less

@@ -0,0 +1,96 @@
+// Breadcrumb 面包屑组件样式
+
+@prefix: kage-breadcrumb;
+
+// ============ 浅色模式（默认） ============
+.@{prefix} {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.@{prefix}-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.@{prefix}-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.@{prefix}-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: rgba(0, 0, 0, 0.88);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: #6366f1;
+  }
+
+  &-current {
+    color: rgba(0, 0, 0, 0.88);
+    cursor: default;
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.88);
+    }
+  }
+}
+
+.@{prefix}-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.@{prefix}-separator {
+  margin: 0 8px;
+  color: rgba(0, 0, 0, 0.45);
+  user-select: none;
+}
+
+// ============ 暗色模式适配 ============
+// 仅通过 dumi 主题选择器，不使用 prefers-color-scheme
+// 这样可以避免系统暗色+dumi浅色主题时的冲突
+
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .@{prefix}-link {
+    color: rgba(255, 255, 255, 0.65);
+
+    &:hover {
+      color: #818cf8;
+    }
+
+    &-current {
+      color: rgba(255, 255, 255, 0.85);
+
+      &:hover {
+        color: rgba(255, 255, 255, 0.85);
+      }
+    }
+  }
+
+  .@{prefix}-separator {
+    color: rgba(255, 255, 255, 0.3);
+  }
+}
+

package/dist/esm/Calendar/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import './style.less';
+export type CalendarMode = 'month' | 'year';
+export interface CalendarProps {
+    /** 当前选中的日期 */
+    value?: Date;
+    /** 默认选中的日期 */
+    defaultValue?: Date;
+    /** 模式 */
+    mode?: CalendarMode;
+    /** 是否全屏显示 */
+    fullscreen?: boolean;
+    /** 自定义渲染日期单元格 */
+    dateCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染日期单元格内容 */
+    dateFullCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染月单元格 */
+    monthCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染月单元格内容 */
+    monthFullCellRender?: (date: Date) => React.ReactNode;
+    /** 不可选择的日期 */
+    disabledDate?: (date: Date) => boolean;
+    /** 日期选择回调 */
+    onSelect?: (date: Date) => void;
+    /** 面板变化回调 */
+    onPanelChange?: (date: Date, mode: CalendarMode) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;