@ant-design/agentic-ui 2.0.10 → 2.0.13

package/dist/Components/Button/IconButton/style.js

@@ -0,0 +1,355 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Components/Button/IconButton/style.ts
+import {
+  useEditorStyleRegister
+} from "../../../Hooks/useStyle";
+var ICON_SIZE = 16;
+var ICON_SIZE_SM = 14;
+var ICON_SIZE_XS = 14;
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      // 基础按钮样式
+      display: "inline-flex",
+      height: "var(--height-control-base)",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      border: "none",
+      borderRadius: "var(--radius-control-base, 6px)",
+      cursor: "pointer",
+      fontFamily: "var(--font-family-base)",
+      fontSize: "var(--font-size-base, 14px)",
+      fontWeight: "var(--font-weight-medium, 500)",
+      lineHeight: "var(--line-height-base, 1.5)",
+      textAlign: "center",
+      textDecoration: "none",
+      transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
+      userSelect: "none",
+      outline: "none",
+      position: "relative",
+      overflow: "hidden",
+      // 统一 icon 尺寸（适配 antd Button 图标容器）- base
+      "&-button .ant-btn-icon": {
+        fontSize: ICON_SIZE,
+        lineHeight: 1
+      },
+      "&-button .ant-btn-icon > *": {
+        width: ICON_SIZE,
+        height: ICON_SIZE
+      },
+      // 尺寸变体
+      "&-button-sm": {
+        width: "var(--height-control-sm)",
+        height: "var(--height-control-sm)",
+        lineHeight: "var(--height-control-sm)",
+        borderRadius: "var(--radius-control-sm)"
+      },
+      "&-button-sm .ant-btn-icon": {
+        fontSize: ICON_SIZE_SM
+      },
+      "&-button-sm .ant-btn-icon > *": {
+        width: ICON_SIZE_SM,
+        height: ICON_SIZE_SM
+      },
+      // 提升优先级以覆盖 antd 的 icon-only 尺寸（包括 outlined 变体）
+      "&-button&-button-sm.ant-btn.ant-btn-icon-only": {
+        width: "var(--height-control-sm)",
+        height: "var(--height-control-sm)",
+        lineHeight: "var(--height-control-sm)",
+        borderRadius: "var(--radius-control-sm)"
+      },
+      "&-button&-button-sm.ant-btn.ant-btn-variant-outlined.ant-btn-icon-only": {
+        width: "var(--height-control-sm)",
+        height: "var(--height-control-sm)",
+        lineHeight: "var(--height-control-sm)",
+        borderRadius: "var(--radius-control-sm)"
+      },
+      "&-button&-button-sm.ant-btn.ant-btn-icon-only .ant-btn-icon": {
+        fontSize: ICON_SIZE_SM
+      },
+      "&-button&-button-sm.ant-btn.ant-btn-icon-only .ant-btn-icon > *": {
+        width: ICON_SIZE_SM,
+        height: ICON_SIZE_SM
+      },
+      "&-button-xs": {
+        width: "var(--height-control-xs)",
+        height: "var(--height-control-xs)",
+        lineHeight: "var(--height-control-xs)",
+        borderRadius: "var(--radius-control-xs)"
+      },
+      "&-button-xs .ant-btn-icon": {
+        fontSize: ICON_SIZE_XS
+      },
+      "&-button-xs .ant-btn-icon > *": {
+        width: ICON_SIZE_XS,
+        height: ICON_SIZE_XS
+      },
+      "&-button&-button-xs.ant-btn.ant-btn-icon-only": {
+        width: "var(--height-control-xs)",
+        height: "var(--height-control-xs)",
+        lineHeight: "var(--height-control-xs)",
+        borderRadius: "var(--radius-control-xs)"
+      },
+      "&-button&-button-xs.ant-btn.ant-btn-variant-outlined.ant-btn-icon-only": {
+        width: "var(--height-control-xs)",
+        height: "var(--height-control-xs)",
+        lineHeight: "var(--height-control-xs)",
+        borderRadius: "var(--radius-control-xs)"
+      },
+      "&-button&-button-xs.ant-btn.ant-btn-icon-only .ant-btn-icon": {
+        fontSize: ICON_SIZE_XS
+      },
+      "&-button&-button-xs.ant-btn.ant-btn-icon-only .ant-btn-icon > *": {
+        width: ICON_SIZE_XS,
+        height: ICON_SIZE_XS
+      },
+      // Elevated 悬浮版本 - 默认/hover/active
+      "&-button-elevated": {
+        borderRadius: "var(--radius-control-base)",
+        background: "var(--color-gray-bg-card-white)",
+        boxShadow: "var(--shadow-border-base)",
+        color: "var(--color-gray-text-secondary)",
+        "&:hover:not(&-button-disabled):not(&-button-loading):not([disabled])": {
+          background: "var(--color-gray-bg-card-white)",
+          boxShadow: "var(--shadow-control-lg)"
+        },
+        "&:active:not(&-button-disabled):not(&-button-loading):not([disabled])": {
+          background: "var(--color-primary-control-fill-secondary)",
+          boxShadow: "var(--shadow-border-base)",
+          color: "var(--color-gray-text-secondary)"
+        }
+      },
+      // 提升 hover/active 选择器优先级以覆盖 antd 的 icon-only 悬浮样式
+      "&-button&-button-elevated.ant-btn.ant-btn-icon-only:not(.ant-btn-disabled):not([disabled]):hover": {
+        background: "var(--color-gray-bg-card-white)",
+        boxShadow: "var(--shadow-control-lg)"
+      },
+      "&-button&-button-elevated.ant-btn.ant-btn-icon-only:not(.ant-btn-disabled):not([disabled]):active": {
+        background: "var(--color-primary-control-fill-secondary)",
+        boxShadow: "var(--shadow-border-base)",
+        color: "var(--color-gray-text-secondary)"
+      },
+      // Elevated 悬浮版本 - disabled
+      "&-button-elevated&-button-disabled, &-button-elevated[disabled]": {
+        background: "var(--color-gray-bg-card-white)",
+        boxShadow: "var(--shadow-control-base)",
+        color: "var(--color-gray-text-disabled)"
+      },
+      // Elevated 悬浮版本 - loading
+      "&-button-elevated&-button-loading": {
+        background: "var(--color-gray-bg-card-white)",
+        boxShadow: "var(--shadow-control-base)",
+        color: "var(--color-gray-text-disabled)"
+      },
+      // Primary 变体 - 主要按钮
+      "&-primary": {
+        backgroundColor: "var(--color-blue-primary, #1677ff)",
+        color: "var(--color-white, #ffffff)",
+        boxShadow: "var(--shadow-control-base, 0 1px 2px rgba(0, 0, 0, 0.1))",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-blue-primary-hover, #4096ff)",
+          boxShadow: "var(--shadow-control-hover, 0 2px 4px rgba(0, 0, 0, 0.15))",
+          transform: "translateY(-1px)"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-blue-primary-active, #0958d9)",
+          boxShadow: "var(--shadow-control-active, 0 1px 2px rgba(0, 0, 0, 0.2))",
+          transform: "translateY(0)"
+        },
+        "&:focus-visible": {
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // Secondary 变体 - 次要按钮
+      "&-secondary": {
+        backgroundColor: "var(--color-gray-bg-card-white, #ffffff)",
+        color: "var(--color-gray-text-default, #343a45)",
+        border: "1px solid var(--color-gray-border, #e6ecf4)",
+        boxShadow: "var(--shadow-control-base, 0 1px 2px rgba(0, 0, 0, 0.1))",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-bg-card-light, #fbfcfd)",
+          borderColor: "var(--color-blue-primary, #1677ff)",
+          color: "var(--color-blue-primary, #1677ff)",
+          boxShadow: "var(--shadow-control-hover, 0 2px 4px rgba(0, 0, 0, 0.15))"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-active, #f0f0f0)",
+          borderColor: "var(--color-blue-primary-active, #0958d9)",
+          color: "var(--color-blue-primary-active, #0958d9)"
+        },
+        "&:focus-visible": {
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // Ghost 变体 - 幽灵按钮
+      "&-ghost": {
+        backgroundColor: "transparent",
+        color: "var(--color-gray-text-default, #343a45)",
+        border: "1px solid transparent",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-hover, #f5f5f5)",
+          color: "var(--color-blue-primary, #1677ff)"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-active, #e6f7ff)",
+          color: "var(--color-blue-primary-active, #0958d9)"
+        },
+        "&:focus-visible": {
+          backgroundColor: "var(--color-gray-control-fill-hover, #f5f5f5)",
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // No-border 变体 - 无边框按钮
+      "&-no-border": {
+        backgroundColor: "transparent",
+        color: "var(--color-gray-text-default, #343a45)",
+        border: "none",
+        boxShadow: "none",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-hover, #f5f5f5)",
+          color: "var(--color-blue-primary, #1677ff)"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-active, #e6f7ff)",
+          color: "var(--color-blue-primary-active, #0958d9)"
+        },
+        "&:focus-visible": {
+          backgroundColor: "var(--color-gray-control-fill-hover, #f5f5f5)",
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // Float 变体 - 浮动按钮
+      "&-float": {
+        backgroundColor: "var(--color-blue-primary, #1677ff)",
+        color: "var(--color-white, #ffffff)",
+        borderRadius: "50%",
+        width: "var(--height-control-large, 40px)",
+        height: "var(--height-control-large, 40px)",
+        padding: 0,
+        minWidth: "auto",
+        boxShadow: "var(--shadow-float, 0 4px 12px rgba(22, 119, 255, 0.4))",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-blue-primary-hover, #4096ff)",
+          boxShadow: "var(--shadow-float-hover, 0 6px 16px rgba(22, 119, 255, 0.5))",
+          transform: "translateY(-2px) scale(1.05)"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-blue-primary-active, #0958d9)",
+          boxShadow: "var(--shadow-float-active, 0 2px 8px rgba(22, 119, 255, 0.3))",
+          transform: "translateY(0) scale(1)"
+        },
+        "&:focus-visible": {
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // CTA 变体 - 行动号召按钮
+      "&-cta": {
+        backgroundColor: "var(--color-green-success, #52c41a)",
+        color: "var(--color-white, #ffffff)",
+        fontWeight: "var(--font-weight-semibold, 600)",
+        boxShadow: "var(--shadow-cta, 0 2px 8px rgba(82, 196, 26, 0.3))",
+        position: "relative",
+        overflow: "hidden",
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: "-100%",
+          width: "100%",
+          height: "100%",
+          background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)",
+          transition: "left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)"
+        },
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-green-success-hover, #73d13d)",
+          boxShadow: "var(--shadow-cta-hover, 0 4px 12px rgba(82, 196, 26, 0.4))",
+          transform: "translateY(-1px)",
+          "&::before": {
+            left: "100%"
+          }
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-green-success-active, #389e0d)",
+          boxShadow: "var(--shadow-cta-active, 0 1px 4px rgba(82, 196, 26, 0.2))",
+          transform: "translateY(0)"
+        },
+        "&:focus-visible": {
+          boxShadow: "0 0 0 2px var(--color-green-success-light, #f6ffed)"
+        }
+      },
+      // 禁用状态
+      "&-disabled": {
+        opacity: 0.5,
+        cursor: "not-allowed",
+        pointerEvents: "none",
+        transform: "none !important",
+        boxShadow: "none !important",
+        "&:hover": {
+          transform: "none !important",
+          boxShadow: "none !important"
+        },
+        "&:active": {
+          transform: "none !important",
+          boxShadow: "none !important"
+        }
+      },
+      // 加载状态
+      "&-loading": {
+        cursor: "not-allowed",
+        pointerEvents: "none",
+        "&:hover": {
+          transform: "none !important"
+        },
+        "&:active": {
+          transform: "none !important"
+        }
+      },
+      // 图标样式
+      "&-icon": {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "inherit",
+        lineHeight: 1
+      },
+      // 文字样式
+      "&-text": {
+        display: "inline-block",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("icon-button", (token) => {
+    const buttonToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(buttonToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/Components/Button/SwitchButton/index.js

@@ -0,0 +1,99 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/Components/Button/SwitchButton/index.tsx
+import { ChevronDown, ChevronUp } from "@sofa-design/icons";
+import { Button, ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext, useEffect, useState } from "react";
+import { useStyle } from "./style";
+var SwitchButton = ({
+  className,
+  style,
+  icon,
+  triggerIcon,
+  disabled,
+  active,
+  defaultActive,
+  onChange,
+  onClick,
+  children
+}) => {
+  var _a;
+  const context = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = context == null ? void 0 : context.getPrefixCls("switch-button");
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const isControlled = typeof active === "boolean";
+  const [innerActive, setInnerActive] = useState(
+    (_a = active != null ? active : defaultActive) != null ? _a : false
+  );
+  useEffect(() => {
+    if (isControlled) {
+      setInnerActive(!!active);
+    }
+  }, [active, isControlled]);
+  const effectiveActive = isControlled ? !!active : innerActive;
+  const rootCls = classNames(
+    `${prefixCls}-button`,
+    prefixCls,
+    className,
+    hashId,
+    {
+      [`${prefixCls}-active`]: effectiveActive,
+      [`${prefixCls}-disabled`]: disabled
+    }
+  );
+  const handleClick = () => __async(void 0, null, function* () {
+    if (disabled)
+      return;
+    const next = !effectiveActive;
+    if (!isControlled)
+      setInnerActive(next);
+    onChange == null ? void 0 : onChange(next);
+    yield onClick == null ? void 0 : onClick();
+  });
+  const renderTriggerIcon = () => {
+    if (triggerIcon)
+      return triggerIcon;
+    return effectiveActive ? /* @__PURE__ */ React.createElement(ChevronUp, null) : /* @__PURE__ */ React.createElement(ChevronDown, null);
+  };
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        disabled,
+        onClick: handleClick,
+        className: rootCls,
+        style,
+        role: "button",
+        "aria-pressed": effectiveActive
+      },
+      icon && /* @__PURE__ */ React.createElement("span", { className: `${prefixCls}-icon` }, icon),
+      children && /* @__PURE__ */ React.createElement("span", { className: `${prefixCls}-text` }, children),
+      /* @__PURE__ */ React.createElement("span", { className: `${prefixCls}-trigger-icon` }, renderTriggerIcon())
+    )
+  );
+};
+var SwitchButton_default = SwitchButton;
+export {
+  SwitchButton,
+  SwitchButton_default as default
+};

package/dist/Components/Button/SwitchButton/style.js

@@ -0,0 +1,158 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Components/Button/SwitchButton/style.ts
+import {
+  useEditorStyleRegister
+} from "../../../Hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      padding: "5px 12px",
+      height: "var(--height-control-base)",
+      borderRadius: "200px",
+      border: "1px solid var(--color-gray-border-light)",
+      boxSizing: "border-box",
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      background: "transparent",
+      font: "var(--font-text-body-base)",
+      letterSpacing: "var(--letter-spacing-body-base, normal)",
+      color: "var(--color-gray-text-default)",
+      "&.ant-btn": {
+        borderRadius: "200px",
+        gap: 0
+      },
+      // hover
+      "&:hover:not(&-disabled)": {
+        background: "var(--color-gray-control-fill-hover)",
+        border: "1px solid var(--color-gray-border-light)"
+      },
+      // active
+      "&:active:not(&-disabled)": {
+        background: "var(--color-primary-bg-card-light)",
+        border: "1px solid var(--color-primary-border-light)",
+        font: "var(--font-text-h6-base)",
+        color: "var(--color-blue-text-secondary)",
+        // 文本与图标颜色显式同步
+        [`${token.componentCls}-text, ${token.componentCls}-icon`]: {
+          color: "var(--color-blue-text-secondary)"
+        },
+        [`${token.componentCls}-icon svg`]: {
+          fill: "currentColor",
+          color: "currentColor"
+        }
+      },
+      // 受控 active（类名）
+      "&-active": {
+        background: "var(--color-primary-bg-card-light)",
+        border: "1px solid var(--color-primary-border-light)",
+        font: "var(--font-text-h6-base)",
+        color: "var(--color-blue-text-secondary)",
+        [`${token.componentCls}-text, ${token.componentCls}-icon`]: {
+          color: "var(--color-blue-text-secondary)"
+        },
+        [`${token.componentCls}-icon svg`]: {
+          fill: "currentColor",
+          color: "currentColor"
+        }
+      },
+      // 与 antd 变体类（outlined）组合时的 active 覆盖（按下）
+      "&.ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):active": {
+        background: "var(--color-primary-bg-card-light)",
+        borderColor: "var(--color-primary-border-light)",
+        color: "var(--color-blue-text-secondary)",
+        [`${token.componentCls}-text, ${token.componentCls}-icon`]: {
+          color: "var(--color-blue-text-secondary)"
+        },
+        [`${token.componentCls}-icon svg`]: {
+          fill: "currentColor",
+          color: "currentColor"
+        }
+      },
+      // 与 antd 变体类（outlined）组合时的受控 active 常驻覆盖
+      "&.ant-btn-variant-outlined&-active": {
+        background: "var(--color-primary-bg-card-light)",
+        borderColor: "var(--color-primary-border-light)",
+        color: "var(--color-blue-text-secondary)",
+        [`${token.componentCls}-text, ${token.componentCls}-icon`]: {
+          color: "var(--color-blue-text-secondary)"
+        },
+        [`${token.componentCls}-icon svg`]: {
+          fill: "currentColor",
+          color: "currentColor"
+        }
+      },
+      // disabled
+      "&-disabled": {
+        border: "1px solid var(--color-gray-border-light)",
+        color: "var(--color-gray-text-disabled)",
+        cursor: "not-allowed",
+        [`${token.componentCls}-text, ${token.componentCls}-icon`]: {
+          color: "var(--color-gray-text-disabled)"
+        },
+        [`${token.componentCls}-icon svg`]: {
+          fill: "currentColor",
+          color: "currentColor"
+        }
+      },
+      [`${token.componentCls}-icon`]: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "inherit",
+        lineHeight: 1,
+        marginRight: 4,
+        color: "inherit"
+      },
+      [`${token.componentCls}-text`]: {
+        display: "inline-block",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        marginRight: 8,
+        color: "inherit",
+        font: "inherit",
+        letterSpacing: "inherit",
+        lineHeight: "19px"
+      },
+      [`${token.componentCls}-trigger-icon`]: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "inherit",
+        lineHeight: 1,
+        color: "inherit"
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("switch-button", (token) => {
+    const buttonToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(buttonToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/Components/Button/ToggleButton/index.js

@@ -0,0 +1,63 @@
+// src/Components/Button/ToggleButton/index.tsx
+import { Button, ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { useStyle } from "./style";
+var ToggleButton = ({
+  className,
+  style,
+  icon,
+  triggerIcon,
+  disabled,
+  active,
+  onClick,
+  children
+}) => {
+  const context = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = context == null ? void 0 : context.getPrefixCls("toggle-button");
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const rootCls = classNames(prefixCls, className, hashId);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(rootCls, {
+          [`${prefixCls}-active`]: active,
+          [`${prefixCls}-disabled`]: disabled
+        }),
+        style
+      },
+      /* @__PURE__ */ React.createElement(
+        ConfigProvider,
+        {
+          wave: {
+            disabled: true
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            disabled,
+            onClick,
+            className: classNames(`${prefixCls}-button`, hashId),
+            style: {
+              border: "none",
+              background: "transparent",
+              padding: 0,
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              boxShadow: "none"
+            }
+          },
+          icon && /* @__PURE__ */ React.createElement("span", { className: `${prefixCls}-icon` }, icon),
+          children && /* @__PURE__ */ React.createElement("span", { className: `${prefixCls}-text` }, children),
+          triggerIcon && /* @__PURE__ */ React.createElement("span", { className: `${prefixCls}-trigger-icon` }, triggerIcon)
+        )
+      )
+    )
+  );
+};
+export {
+  ToggleButton
+};