tango-ui-cw 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tango-ui-cw",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "A lightweight ui library with ClayW",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -12,11 +12,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.4.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "vite": "^6.3.5"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -27,18 +29,15 @@
     }
   },
   "files": [
-    "dist",
-    "src/component"
+    "dist"
   ],
   "exports": {
-  ".": {
-    "import": "./dist/index.mjs",
-    "require": "./dist/index.js"
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css"
   },
-  "./dist/index.css": {
-    "default": "./dist/index.css"
-  }
-},
   "dependencies": {
     "prop-types": "^15.8.1"
   }

package/src/component/CSSFab/useTangoStyle.jsx

@@ -1,182 +0,0 @@
-// 封装sx属性值
-export const useTangoStyle = (sx) => {
-  return Object.entries(sx).reduce((acc, [key, value]) => {
-    const pxValue = `${value}px`;
-
-    switch (key) {
-      case "mt":
-        acc.marginTop = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "mr":
-        acc.marginRight = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "mb":
-        acc.marginBottom = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "ml":
-        acc.marginLeft = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "m":
-        acc.margin = typeof value === "number" ? `${value}px` : value;
-        break;
-
-      case "pt":
-        acc.paddingTop = pxValue;
-        break;
-      case "pr":
-        acc.paddingRight = pxValue;
-        break;
-      case "pb":
-        acc.paddingBottom = pxValue;
-        break;
-      case "pl":
-        acc.paddingLeft = pxValue;
-        break;
-      case "p":
-        acc.padding = pxValue;
-        break;
-      case "br":
-        acc.borderRadius = typeof value === "number" ? `${value}px` : value;
-        break;
-      case "bg":
-        acc.background = value; // 直接使用传入的背景值
-        break;
-      case "c":
-        acc.color = value;
-        break;
-      case "b":
-        acc.border = value === 1 ? "1px solid red" : value; // 如果值是 1，则设置为 "1px solid red"
-        break;
-      case "center":
-        acc.position = "absolute"; // 设置绝对定位
-        acc.inset = 0; // 设置inset为0
-        acc.margin = "auto"; // 设置margin为auto，保证元素居中
-        break;
-      case "pot":
-        acc.top = pxValue;
-        break;
-      case "por":
-        acc.right = pxValue;
-        break;
-      case "pob":
-        acc.bottom = pxValue;
-        break;
-      case "pol":
-        acc.left = pxValue;
-        break;
-      case "rel":
-        acc.position = "relative"; // 设置相对定位
-        break;
-      case "ab":
-        acc.position = "absolute"; // 设置绝对定位
-        break;
-      case "fixed":
-        acc.position = "fixed"; // 设置窗口定位
-        break;
-      case "w":
-        acc.width = pxValue;
-        break;
-      case "h":
-        acc.height = pxValue;
-        break;
-      case "vw":
-        acc.width = `${value}vw`; // 将宽度值转换为 vw 单位
-        break;
-      case "vh":
-        acc.height = `${value}vh`; // 将高度值转换为 vh 单位
-        break;
-      case "presentw":
-        acc.width = `${value}%`; // 将宽度值转换为 % 单位
-        break;
-      case "presenth":
-        acc.height = `${value}%`; // 将高度值转换为 % 单位
-        break;
-      case "mw":
-        acc.minWidth = pxValue;
-        break;
-      case "mh":
-        acc.minHieght = pxValue;
-        break;
-      case "fl":
-        acc.float = "left";
-        break;
-      case "fr":
-        acc.float = "right";
-        break;
-      case "size":
-        acc.fontSize = pxValue;
-        break;
-      case "tac":
-        acc.textAlign = "center";
-        break;
-      case "z":
-        acc.zIndex = value;
-        break;
-      case "tran":
-        acc.transition = `${value}s`;
-        break;
-      case "flex":
-        acc.display = "flex";
-        break;
-      case "aic":
-        acc.alignItems = "center";
-        break;
-      case "jcc":
-        acc.justifyContent = "center";
-        break;
-      case "jc":
-        acc.justifyContent = value;
-        break;
-      case "oh":
-        acc.overflow = "hidden";
-        break;
-      case "ohauto":
-        acc.overflow = "auto";
-        break;
-      case "op":
-        acc.opacity = value;
-        break;
-      case "none":
-        acc.display = "none";
-        break;
-      case "ar":
-        acc.aspectRatio = value;
-        break;
-      case "ls":
-        acc.letterSpacing = pxValue;
-        break;
-      case "lh":
-        acc.lineHeight = pxValue;
-        break;
-      case "fwb":
-        acc.fontWeight = "bold";
-        break;
-      case "boxsizing":
-        acc.boxSizing = "border-box";
-        break;
-      case "boxshadow":
-        acc.boxShadow = value;
-        break;
-
-      case "f":
-        acc.flex = typeof value === "number" ? value : `${value}`; // 支持数字或字符串
-        break;
-      case "bColor":
-        acc.borderColor = value; // 直接使用传入的背景值
-        break;
-      case "bgSize":
-        acc.backgroundSize = value; // 直接使用传入的背景值
-        break;
-      case "bgPosition":
-        acc.backgroundPosition = value; // 直接使用传入的背景值
-        break;
-      case "bgRepeat":
-        acc.backgroundRepeat = value; // 直接使用传入的背景值
-        break;
-      default:
-        acc[key] = value; // 允许其他样式直接传入，理论上可以支持所有的CSS样式传入
-    }
-
-    return acc;
-  }, {});
-};

package/src/component/MaterialButton/MaterialButton.module.css

@@ -1,64 +0,0 @@
-.materialBtn {
-  position: relative;
-  overflow: hidden;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: Arial, sans-serif;
-  font-weight: 500;
-  color: white;
-  background-color: #4caf50;
-  transition: background-color 0.3s ease;
-  user-select: none;
-  outline: none;
-  padding: 10px 20px;
-}
-
-.materialBtn:hover:not(.materialBtnDisabled) {
-  background-color: #45a047;
-}
-
-.materialBtn:active:not(.materialBtnDisabled) {
-  background-color: #388e3c;
-}
-
-/* 不同大小 */
-.materialBtnSmall {
-  font-size: 12px;
-  padding: 6px 12px;
-}
-
-.materialBtnMedium {
-  font-size: 14px;
-  padding: 10px 20px;
-}
-
-.materialBtnLarge {
-  font-size: 18px;
-  padding: 14px 28px;
-}
-
-/* 禁用 */
-.materialBtnDisabled {
-  background-color: #e0e0e0;
-  color: #a0a0a0;
-  cursor: not-allowed;
-}
-
-/* 波纹效果 */
-.ripple {
-  position: absolute;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.6);
-  transform: scale(0);
-  animation: ripple-effect 600ms linear;
-  pointer-events: none;
-  z-index: 0;
-}
-
-@keyframes ripple-effect {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}

package/src/component/MaterialButton/index.jsx

@@ -1,69 +0,0 @@
-import React, { useRef } from "react";
-import styles from "./MaterialButton.module.css"; // 使用模块化 CSS
-import { useTangoStyle } from "../CSSFab/useTangoStyle";
-
-export default function MaterialButton({
-  size = "medium",
-  sx = {},
-  style = {},
-  className = "",
-  onClick,
-  children,
-  disabled = false,
-  ...rest
-}) {
-   const buttonRef = useRef(null);
-
-  const sxStyle = useTangoStyle(sx);
-  const combinedStyle = { ...sxStyle, ...style };
-
-  function handleRipple(e) {
-    if (disabled) return;
-
-    const button = buttonRef.current;
-    const circle = document.createElement("span");
-    const diameter = Math.max(button.clientWidth, button.clientHeight);
-    const radius = diameter / 2;
-
-    circle.classList.add(styles.ripple); // 模块化样式
-    circle.style.width = circle.style.height = `${diameter}px`;
-    circle.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`;
-    circle.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`;
-
-    const oldRipple = button.querySelector(`.${styles.ripple}`);
-    if (oldRipple) oldRipple.remove();
-
-    button.appendChild(circle);
-  }
-
-  const sizeClass = styles[`materialBtn${capitalize(size)}`]; // 动态大小样式
-  const combinedClassName = [
-    styles.materialBtn,
-    sizeClass,
-    disabled ? styles.materialBtnDisabled : "",
-    className, // 用户自定义 className（外部样式）
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    <button
-      ref={buttonRef}
-      className={combinedClassName}
-      style={combinedStyle}
-      onClick={(e) => {
-        handleRipple(e);
-        onClick?.(e);
-      }}
-      disabled={disabled}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-}
-
-// 辅助函数：首字母大写
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}

package/src/component/MaterialInput/MaterialInput.module.css

@@ -1,37 +0,0 @@
-.materialInput {
-  width: 100%;
-}
-
-.inputWrapper {
-  position: relative;
-  margin: 10px 0;
-  width: 100%;
-}
-
-.materialInputField {
-  width: 100%;
-  padding: 16px 8px 8px 8px;
-  font-size: 16px;
-  border: none;
-  border-bottom: 1px solid grey;
-  background: transparent;
-  outline: none;
-}
-
-.materialLabel {
-  position: absolute;
-  left: 8px;
-  top: 16px;
-  font-size: 16px;
-  color: grey;
-  transition: all 0.2s ease;
-  pointer-events: none;
-}
-
-/* 上浮状态样式 */
-.filled ~ .materialLabel,
-.float {
-  top: 2px;
-  font-size: 12px;
-  color: #45a047;
-}

package/src/component/MaterialInput/index.jsx

@@ -1,34 +0,0 @@
-// Material风格Input
-import { useState } from "react";
-import styles from "./MaterialInput.module.css";
-
-export default function FloatInput({ label, type = "text" }) {
-  const [focused, setFocused] = useState(false);
-  const [value, setValue] = useState("");
-
-  const isFloating = focused || value;
-
-  return (
-    <div className={styles.materialInput}>
-      <div className={styles.inputWrapper}>
-        <input
-          type={type}
-          className={`${styles.materialInputField} ${
-            isFloating ? styles.filled : ""
-          }`}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          onChange={(e) => setValue(e.target.value)}
-          value={value}
-        />
-        <label
-          className={`${styles.materialLabel} ${
-            isFloating ? styles.float : ""
-          }`}
-        >
-          {label}
-        </label>
-      </div>
-    </div>
-  );
-}

package/src/component/TButton/TButton.module.css

@@ -1,184 +0,0 @@
-/* TButton.module.css */
-
-.btn {
-  font-family: Arial, sans-serif;
-  border: none;
-  cursor: pointer;
-  padding: 8px 16px;
-  border-radius: 8px;
-  transition: all 0.3s;
-  letter-spacing: 2px;
-}
-
-.btn:hover {
-  transition: 0.5s;
-  animation: btn-content 1s;
-  outline: 0.1em solid transparent;
-  outline-offset: 0.2em;
-}
-
-.btn-default {
-  background-color: rgb(213, 213, 213);
-  color: #000;
-}
-
-.btn-default:hover {
-  box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
-}
-
-.btn-transparent {
-  background-color: transparent;
-  color: black;
-}
-
-.btn-transparent:hover {
-  box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
-}
-
-.btn-danger {
-  background-color: #dc3545;
-  color: #fff;
-}
-
-.btn-danger:hover {
-  box-shadow: 0 0 0.4em 0 #dc3545;
-}
-
-.btn-success {
-  background-color: #4caf50;
-  color: #fff;
-}
-
-.btn-success:hover {
-  box-shadow: 0 0 0.4em 0 #4caf50;
-}
-
-.btn-outline {
-  background-color: transparent;
-  border-width: 1px;
-  border-color: #000;
-}
-
-.btn-default.btn-outline {
-  color: #000;
-  border: 1px solid #d5d5d5;
-}
-
-.btn-default.btn-outline:hover {
-  box-shadow: 0 0 0.4em 0 #d5d5d5;
-}
-
-.btn-success.btn-outline {
-  color: #28a745;
-  border: 1px solid #28a745;
-}
-
-.btn-success.btn-outline:hover {
-  box-shadow: 0 0 0.4em 0 #28a745;
-}
-
-.btn-danger.btn-outline {
-  color: #dc3545;
-  border: 1px solid #dc3545;
-}
-
-.btn-danger.btn-outline:hover {
-  box-shadow: 0 0 0.4em 0 #dc3545;
-}
-
-.btn-transparent.btn-outline {
-  color: black;
-  border: 1px solid #6c757d;
-}
-
-.btn-transparent.btn-outline:hover {
-  box-shadow: 0 0 0.4em 0 #6c757d;
-}
-
-.btn-Neumorphism {
-  background: #e0e0e0;
-  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
-  color: white;
-}
-
-.btn-Neumorphism:hover {
-  box-shadow: inset 4px 4px 8px rgba(190, 190, 190, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.8), 4px 4px 8px rgba(190, 190, 190, 0.6), -4px -4px 8px rgba(255, 255, 255, 0.8);
-  transform: translateY(-2px);
-}
-
-.btn-Neumorphism:active {
-  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
-  transform: translateY(1px);
-}
-
-.btn-success.btn-Neumorphism {
-  background-color: #28a745;
-  box-shadow: inset 4px 4px 8px rgba(20, 90, 37, 0.6), inset -4px -4px 8px rgba(50, 200, 100, 0.8), 4px 4px 8px rgba(20, 90, 37, 0.3), -4px -4px 8px rgba(50, 200, 100, 0.5);
-}
-
-.btn-success.btn-Neumorphism:hover {
-  box-shadow: inset 3px 3px 6px rgba(20, 90, 37, 0.8), inset -3px -3px 6px rgba(50, 200, 100, 0.9), 3px 3px 6px rgba(20, 90, 37, 0.5), -3px -3px 6px rgba(50, 200, 100, 0.7);
-}
-
-.btn-success.btn-Neumorphism:active {
-  box-shadow: inset 4px 4px 8px rgba(20, 90, 37, 0.9), inset -4px -4px 8px rgba(50, 200, 100, 1);
-}
-
-.btn-transparent.btn-Neumorphism {
-  background-color: transparent;
-  color: white;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 4px 4px 8px rgba(190, 190, 190, 0.6), -4px -4px 8px rgba(255, 255, 255, 0.8);
-}
-
-.btn-transparent.btn-Neumorphism:hover {
-  box-shadow: inset 4px 4px 8px rgba(190, 190, 190, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.8), 0 0 0.4em rgba(213, 213, 213, 0.8);
-}
-
-.btn-transparent.btn-Neumorphism:active {
-  box-shadow: inset 6px 6px 12px rgba(190, 190, 190, 0.8), inset -6px -6px 12px rgba(255, 255, 255, 1);
-}
-
-.btn-danger.btn-Neumorphism {
-  background-color: #dc3545;
-  box-shadow: 4px 4px 8px rgba(145, 40, 50, 0.6), -4px -4px 8px rgba(255, 102, 112, 0.8);
-}
-
-.btn-danger.btn-Neumorphism:hover {
-  box-shadow: inset 4px 4px 8px rgba(145, 40, 50, 0.6), inset -4px -4px 8px rgba(255, 102, 112, 0.8), 0 0 0.4em rgba(220, 53, 69, 0.8);
-}
-
-.btn-danger.btn-Neumorphism:active {
-  box-shadow: inset 6px 6px 12px rgba(145, 40, 50, 0.8), inset -6px -6px 12px rgba(255, 102, 112, 1);
-}
-
-.btn-small {
-  font-size: 12px;
-  padding: 4px 8px;
-}
-
-.btn-medium {
-  font-size: 14px;
-  padding: 8px 16px;
-}
-
-.btn-large {
-  font-size: 16px;
-  padding: 12px 20px;
-}
-
-.btn-huge {
-  font-size: 25px;
-  padding: 18px 45px;
-}
-
-.btn-disabled {
-  background-color: #e0e0e0;
-  color: #a0a0a0;
-  cursor: not-allowed;
-}
-
-.btn-disabled:hover {
-  transition: 0s;
-  box-shadow: none;
-}

package/src/component/TButton/index.jsx

@@ -1,81 +0,0 @@
-// 封装的button组件
-import React from "react";
-import PropTypes from "prop-types";
-import styles from './TButton.module.css' // 引入样式文件
-import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
-
-export default function Button(props) {
-  // 接收属性参数，调整按钮样式
-  const {
-    type = "default",
-    size = "medium",
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "", // 允许用户自定义 className
-    onClick,
-    children,
-    disabled,
-    outline,
-    Neumorphism,
-  } = props;
-
-   // 使用类名控制按钮的样式：按钮类型，按钮尺寸，按钮是否禁用
-  const className = [
-    styles.btn,
-    styles[`btn-${type}`],
-    styles[`btn-${size}`],
-    disabled ? styles['btn-disabled'] : '',
-    outline ? styles['btn-outline'] : '',
-    Neumorphism ? styles['btn-Neumorphism'] : '',
-    userClassName // 用户传入的 className 保持字符串形式
-  ]
-    .filter(Boolean) // 过滤掉空值
-    .join(" ");
-  // 合并用户传入的 className
-
-  // 用于接收sx属性设置的属性样式
-  const sxStyle = useTangoStyle(sx);
-
-    // 合并 sx 和 style，确保 style 优先级更高
-    const combinedStyle = { ...sxStyle, ...userStyle };
-
-  // 定义属性类型
-  Button.propTypes = {
-    type: PropTypes.oneOf(["default", "transparent", "danger", "success"]), // 按钮类型:默认、透明、警告、成功
-    size: PropTypes.oneOf(["small", "medium", "large", "huge"]), // 按钮大小
-    sx: PropTypes.object, // 自定义样式对象
-    style: PropTypes.object, // 用户传入的 style 属性，保证style属性优先级最高
-    onClick: PropTypes.func, // 点击事件
-    className: PropTypes.string, // 添加 className PropTypes
-    children: PropTypes.node.isRequired, // 按钮内容
-    disabled: PropTypes.bool, // 是否禁用
-    outline: PropTypes.bool, // 是否为轮廓按钮
-    Neumorphism: PropTypes.bool, // 是否为新拟态风格按钮
-  };
-
-  // 默认属性
-  Button.defaultProps = {
-    type: "default",
-    size: "medium",
-    sx: {},
-    style: {},
-    onClick: () => {},
-    className: "", // 默认值为空字符串
-    disabled: false,
-    outline: false,
-    Neumorphism: false,
-  };
-
-  return (
-    <button
-      className={className}
-      style={combinedStyle} // 应用解析后的内联样式
-      onClick={onClick}
-      disabled={disabled}
-      outline={outline}
-      Neumorphism={Neumorphism}
-    >
-      {children}
-    </button>
-  );
-};