@mariotzz/tzz-element 2.0.0 → 2.1.0

package/lib/Button/button.js

@@ -0,0 +1,155 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Button/button.tsx
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+var React = __toESM(require("react"));
+var import_button_module = __toESM(require("./button.module.css"));
+var import_utils = require("./utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+function hasReadableText(node) {
+  if (node === null || node === void 0 || typeof node === "boolean")
+    return false;
+  if (typeof node === "string" || typeof node === "number")
+    return String(node).trim().length > 0;
+  if (Array.isArray(node))
+    return node.some(hasReadableText);
+  if (React.isValidElement(node))
+    return hasReadableText(node.props.children);
+  return false;
+}
+var Button = React.forwardRef(
+  function Button2(props, ref) {
+    const {
+      variant = "default",
+      size = "md",
+      block = false,
+      disabled = false,
+      loading = false,
+      loadingText,
+      startIcon,
+      endIcon,
+      spinnerPlacement = "start",
+      asChild = false,
+      className,
+      children,
+      // 原生 props（我们需要包一层以实现 disabled/loading 的拦截）
+      onClick,
+      onKeyDown,
+      // 原生 button type：默认 button，避免 <form> 内误提交
+      type,
+      ...rest
+    } = props;
+    const isDisabled = disabled || loading;
+    if (process.env.NODE_ENV !== "production") {
+      if (size === "icon") {
+        const hasText = hasReadableText(children);
+        const ariaLabel = props["aria-label"];
+        if (!hasText && (!ariaLabel || ariaLabel.trim().length === 0)) {
+          console.warn(
+            '[tzz-element/Button] size="icon" 时建议提供 aria-label（或 children 包含可读文本），以满足无障碍要求。'
+          );
+        }
+      }
+    }
+    const handleClick = (e) => {
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick == null ? void 0 : onClick(e);
+    };
+    const handleKeyDown = (e) => {
+      if (isDisabled) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+      }
+      onKeyDown == null ? void 0 : onKeyDown(e);
+    };
+    const classes = (0, import_utils.cn)(
+      import_button_module.default.button,
+      import_button_module.default[variant],
+      import_button_module.default[size],
+      block && import_button_module.default.block,
+      className
+    );
+    const content = loading ? loadingText ?? children : children;
+    const Spinner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_button_module.default.iconSlot, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_button_module.default.spinner }) });
+    const Start = loading && spinnerPlacement === "start" ? Spinner : startIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_button_module.default.iconSlot, "aria-hidden": "true", children: startIcon }) : null;
+    const End = loading && spinnerPlacement === "end" ? Spinner : endIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_button_module.default.iconSlot, "aria-hidden": "true", children: endIcon }) : null;
+    const sharedProps = {
+      className: classes,
+      "data-variant": variant,
+      "data-size": size,
+      "data-disabled": isDisabled ? "true" : "false",
+      "data-loading": loading ? "true" : "false",
+      "aria-busy": loading ? true : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest
+    };
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_utils.Slot,
+        {
+          ref,
+          ...sharedProps,
+          "aria-disabled": isDisabled ? true : void 0,
+          tabIndex: isDisabled ? -1 : rest.tabIndex,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ref,
+        disabled: isDisabled,
+        ...sharedProps,
+        type: type === "submit" ? "submit" : type === "reset" ? "reset" : "button",
+        children: [
+          Start,
+          content,
+          End
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/lib/Button/button.module.css

@@ -0,0 +1,164 @@
+/* button.module.css
+   设计目标：
+   - 使用 CSS Variables 方便主题化
+   - focus-visible 清晰可见（键盘才出现）
+   - disabled/loading 统一语义（原生 disabled + data-disabled）
+*/
+
+.button {
+  --tzz-radius: 10px;
+  --tzz-fg: #111827;
+  --tzz-bg: #fff;
+  --tzz-border: rgba(17, 24, 39, 14%);
+  --tzz-primary: #1677ff;
+  --tzz-primary-fg: #fff;
+  --tzz-danger: #ef4444;
+  --tzz-danger-fg: #fff;
+  --tzz-ring: rgba(22, 119, 255, 35%);
+
+  appearance: none;
+  border: 1px solid var(--tzz-border);
+  background: var(--tzz-bg);
+  color: var(--tzz-fg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  gap: 8px;
+  white-space: nowrap;
+  user-select: none;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  border-radius: var(--tzz-radius);
+  transition: background-color 160ms ease, border-color 160ms ease,
+    color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
+  cursor: pointer;
+}
+
+/* sizes */
+.sm {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+
+.md {
+  height: 36px;
+  padding: 0 14px;
+  font-size: 14px;
+}
+
+.lg {
+  height: 42px;
+  padding: 0 18px;
+  font-size: 15px;
+}
+
+.icon {
+  height: 36px;
+  width: 36px;
+  padding: 0;
+}
+
+/* block */
+.block {
+  width: 100%;
+}
+
+/* variants */
+.default {
+  background: var(--tzz-bg);
+  color: var(--tzz-fg);
+  border-color: var(--tzz-border);
+}
+
+.primary {
+  background: var(--tzz-primary);
+  color: var(--tzz-primary-fg);
+  border-color: transparent;
+}
+
+.secondary {
+  background: rgba(17, 24, 39, 6%);
+  color: var(--tzz-fg);
+  border-color: rgba(17, 24, 39, 8%);
+}
+
+.ghost {
+  background: transparent;
+  color: var(--tzz-fg);
+  border-color: transparent;
+}
+
+.link {
+  background: transparent;
+  color: var(--tzz-primary);
+  border-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+  height: auto;
+}
+
+.destructive {
+  background: var(--tzz-danger);
+  color: var(--tzz-danger-fg);
+  border-color: transparent;
+}
+
+/* states: hover/active (exclude disabled/loading) */
+.button:not([data-disabled='true']):not([data-loading='true']):hover {
+  filter: brightness(0.98);
+}
+
+.default:not([data-disabled='true']):not([data-loading='true']):hover {
+  background: rgba(17, 24, 39, 3%);
+}
+
+.ghost:not([data-disabled='true']):not([data-loading='true']):hover {
+  background: rgba(17, 24, 39, 5%);
+}
+
+.link:not([data-disabled='true']):not([data-loading='true']):hover {
+  text-decoration: underline;
+}
+
+.button:not([data-disabled='true']):not([data-loading='true']):active {
+  transform: translateY(0.5px);
+}
+
+/* focus-visible */
+.button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px var(--tzz-ring);
+}
+
+/* disabled/loading */
+.button[disabled],
+.button[data-disabled='true'] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* spinner / icon slots */
+.iconSlot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentcolor;
+  border-right-color: transparent;
+  border-radius: 9999px;
+  animation: spin 800ms linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/Button/index.d.ts

@@ -1,7 +1,2 @@
-import { Button as AntButton } from 'antd';
-import React from 'react';
-export type ButtonProps = React.ComponentProps<typeof AntButton> & {
-    dangerLight?: boolean;
-};
-export declare const Button: React.FC<ButtonProps>;
-export default Button;
+export { Button } from './button';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './types';

package/lib/Button/index.js

@@ -16,19 +16,13 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/Button/index.tsx
+// src/Button/index.ts
 var Button_exports = {};
 __export(Button_exports, {
-  Button: () => Button,
-  default: () => Button_default
+  Button: () => import_button.Button
 });
 module.exports = __toCommonJS(Button_exports);
-var import_antd = require("antd");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Button = ({ dangerLight, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { ...props, danger: dangerLight ?? props.danger });
-};
-var Button_default = Button;
+var import_button = require("./button");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button

package/lib/Button/types.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'ghost' | 'link' | 'destructive';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+export type ButtonIconPosition = 'start' | 'end';
+type NativeButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export interface ButtonProps extends Omit<NativeButtonProps, 'disabled'> {
+    /**
+     * 视觉变体
+     */
+    variant?: ButtonVariant;
+    /**
+     * 尺寸
+     * - icon: 纯图标按钮（建议提供 aria-label）
+     */
+    size?: ButtonSize;
+    /**
+     * 是否撑满父容器宽度（类似 antd block）
+     */
+    block?: boolean;
+    /**
+     * 禁用（asChild 场景使用 aria-disabled + 阻止交互）
+     */
+    disabled?: boolean;
+    /**
+     * 加载态：自动禁用交互，并设置 aria-busy
+     */
+    loading?: boolean;
+    /**
+     * loading 时展示的文案（可选）
+     */
+    loadingText?: React.ReactNode;
+    /**
+     * 左侧图标
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * 右侧图标
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * spinner 所在位置（默认 start）
+     */
+    spinnerPlacement?: ButtonIconPosition;
+    /**
+     * 多态：将 Button 的 className/事件/属性注入到子元素（类似 shadcn asChild）
+     * - children 必须是单个 ReactElement
+     */
+    asChild?: boolean;
+    /**
+     * icon-only 的可访问性文案（size="icon" 且无可读文本时强烈建议）
+     */
+    'aria-label'?: string;
+    /**
+     * 测试定位
+     */
+    'data-testid'?: string;
+}
+export {};

package/lib/{Foo/index.js → Button/types.js}

@@ -2,10 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -16,12 +12,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/Foo/index.tsx
-var Foo_exports = {};
-__export(Foo_exports, {
-  default: () => Foo_default
-});
-module.exports = __toCommonJS(Foo_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var Foo = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: props.title });
-var Foo_default = Foo;
+// src/Button/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/Button/utils.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * 类名合并工具（不引入 clsx/classnames，保持库自包含）
+ * 支持：
+ *  - cn('a', 'b')
+ *  - cn('a', condition && 'b')
+ *  - cn(['a', 'b'])
+ *  - cn({ a: true, b: false })
+ */
+export type ClassValue = string | number | null | undefined | false | ClassValue[] | Record<string, boolean>;
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * 合并多个 ref（forwardRef + childRef 场景）
+ */
+export declare function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>): (node: T) => void;
+/**
+ * 合并事件处理器：先执行 ours，再执行 theirs
+ * - 如果 ours 调用了 preventDefault / stopPropagation，theirs 仍可能执行（取决于你是否 early return）
+ *   所以建议在 ours 内部对 disabled/loading 做 early return。
+ */
+export declare function mergeHandlers<E extends {
+    defaultPrevented?: boolean;
+}>(ours?: (event: E) => void, theirs?: (event: E) => void): (event: E) => void;
+/**
+ * Slot：将 props/className/ref 注入到 child（asChild 模式）
+ * - 不依赖 @radix-ui/react-slot
+ * - 仅支持单个 ReactElement
+ */
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactElement<any>;
+}
+export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;

package/lib/Button/utils.js

@@ -0,0 +1,113 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Button/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  Slot: () => Slot,
+  cn: () => cn,
+  composeRefs: () => composeRefs,
+  mergeHandlers: () => mergeHandlers
+});
+module.exports = __toCommonJS(utils_exports);
+var React = __toESM(require("react"));
+function cn(...inputs) {
+  const classes = [];
+  const push = (v) => {
+    if (!v)
+      return;
+    if (typeof v === "string" || typeof v === "number") {
+      classes.push(String(v));
+      return;
+    }
+    if (Array.isArray(v)) {
+      v.forEach(push);
+      return;
+    }
+    if (typeof v === "object") {
+      for (const [k, ok] of Object.entries(v)) {
+        if (ok)
+          classes.push(k);
+      }
+    }
+  };
+  inputs.forEach(push);
+  return classes.join(" ");
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref)
+        continue;
+      if (typeof ref === "function")
+        ref(node);
+      else
+        ref.current = node;
+    }
+  };
+}
+function mergeHandlers(ours, theirs) {
+  return (event) => {
+    ours == null ? void 0 : ours(event);
+    if (event.defaultPrevented)
+      return;
+    theirs == null ? void 0 : theirs(event);
+  };
+}
+var Slot = React.forwardRef(function Slot2({ children, className, style, onClick, onKeyDown, ...rest }, forwardedRef) {
+  if (!React.isValidElement(children))
+    return null;
+  const childProps = children.props;
+  const mergedClassName = cn(childProps.className, className);
+  const mergedStyle = { ...childProps.style || {}, ...style || {} };
+  const mergedOnClick = mergeHandlers(
+    onClick,
+    childProps.onClick
+  );
+  const mergedOnKeyDown = mergeHandlers(
+    onKeyDown,
+    childProps.onKeyDown
+  );
+  const mergedRef = composeRefs(children.ref, forwardedRef);
+  return React.cloneElement(children, {
+    ...rest,
+    ...childProps,
+    className: mergedClassName,
+    style: mergedStyle,
+    onClick: mergedOnClick,
+    onKeyDown: mergedOnKeyDown,
+    ref: mergedRef
+  });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slot,
+  cn,
+  composeRefs,
+  mergeHandlers
+});

package/lib/index.d.ts

@@ -1,3 +1 @@
-export { default as Button } from './Button';
-export { default as Demo } from './Demo';
-export { default as Foo } from './Foo';
+export { Button } from './Button';

package/lib/index.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,30 +14,16 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Button: () => import_Button.default,
-  Demo: () => import_Demo.default,
-  Foo: () => import_Foo.default
+  Button: () => import_Button.Button
 });
 module.exports = __toCommonJS(src_exports);
-var import_Button = __toESM(require("./Button"));
-var import_Demo = __toESM(require("./Demo"));
-var import_Foo = __toESM(require("./Foo"));
+var import_Button = require("./Button");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button,
-  Demo,
-  Foo
+  Button
 });

package/lib/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>;
+  export default classes;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mariotzz/tzz-element",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "exports": {
     ".": {

package/es/Demo/index.d.ts

@@ -1,5 +0,0 @@
-import { type FC } from 'react';
-declare const Demo: FC<{
-    title: string;
-}>;
-export default Demo;

package/es/Demo/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-var Demo = function Demo(props) {
-  return /*#__PURE__*/_jsx("h4", {
-    children: props.title
-  });
-};
-export default Demo;

package/es/Foo/index.d.ts

@@ -1,5 +0,0 @@
-import { type FC } from 'react';
-declare const Foo: FC<{
-    title: string;
-}>;
-export default Foo;

package/es/Foo/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-var Foo = function Foo(props) {
-  return /*#__PURE__*/_jsx("h4", {
-    children: props.title
-  });
-};
-export default Foo;

package/lib/Demo/index.d.ts

@@ -1,5 +0,0 @@
-import { type FC } from 'react';
-declare const Demo: FC<{
-    title: string;
-}>;
-export default Demo;