tango-ui-cw 0.1.0 → 0.2.0

package/src/component/MaterialInput/{MaterialInput.css → MaterialInput.module.css}

@@ -1,33 +1,37 @@
-.materialInput .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;
-}
-
-/* label 上浮时 */
-.filled ~ .materialLabel,
-.float {
-  top: 2px;
-  font-size: 12px;
-  color: #45a047;
-}
+.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,29 +1,34 @@
-// Material风格Input
-import { useState } from "react";
-import './MaterialInput.css';
-
-export default function FloatInput({ label, type = "text" }) {
-  const [focused, setFocused] = useState(false);
-  const [value, setValue] = useState("");
-
-  const isFloating = focused || value;
-
-  return (
-    <div className="materialInput">
-      <div className="inputWrapper">
-        <input
-          type={type}
-          className={`materialInputField ${isFloating ? "filled" : ""}`}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          onChange={(e) => setValue(e.target.value)}
-          value={value}
-        />
-        <label className={`materialLabel ${isFloating ? "float" : ""}`}>
-          {label}
-        </label>
-      </div>
-    </div>
-  );
-}
-
+// 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

@@ -0,0 +1,184 @@
+/* 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,74 +1,81 @@
-// 封装的button组件
-import React from "react";
-import PropTypes from "prop-types";
-import "./TButton.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 = `btn btn-${type} btn-${size} ${
-    disabled ? "btn-disabled" : ""
-  } ${outline ? "btn-outline" : ""} ${
-    Neumorphism ? "btn-Neumorphism" : ""
-  } ${userClassName}`; // 合并用户传入的 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>
-  );
-};
+// 封装的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 };
+
+  // 定义属性类型
+  TButton.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, // 是否为新拟态风格按钮
+  };
+
+  // 默认属性
+  TButton.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>
+  );
+};

package/src/component/TColorPicker/{TColorPicker.css → TColorPicker.module.css}

@@ -1,24 +1,24 @@
-.color-picker {
-    width: 35px;
-    height: 35px;
-    /* border-radius:10px; */
-    padding: 0px 1px;
-    background: white;
-}
-
-.color-picker-disabled {
-    cursor: not-allowed;
-}
-
-.color-picker-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.color-text {
-    display: flex;
-    flex-direction: column;
-    font-size: 12px;
-    color: #555;
-}
+.colorPicker {
+    width: 35px;
+    height: 35px;
+    padding: 0px 1px;
+    background: white;
+  }
+  
+  .colorPickerDisabled {
+    cursor: not-allowed;
+  }
+  
+  .colorPickerWrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  .colorText {
+    display: flex;
+    flex-direction: column;
+    font-size: 12px;
+    color: #555;
+  }
+