From abc7b0a29eefcffd4bbd184efcaf13c56313af54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Thu, 28 Dec 2023 10:06:28 +0800
Subject: [PATCH] =?UTF-8?q?enhance(compo):=E5=8A=A8=E4=BD=9C=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=E7=A6=81=E7=94=A8?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ActionIcon/ActionIcon.jsx      |  3 ++
 .../ActionIcon/ActionIcon.module.css          | 29 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/ActionIcon/ActionIcon.jsx b/src/components/ActionIcon/ActionIcon.jsx
index 9775460..8042277 100644
--- a/src/components/ActionIcon/ActionIcon.jsx
+++ b/src/components/ActionIcon/ActionIcon.jsx
@@ -9,6 +9,7 @@ import classes from "./ActionIcon.module.css";
  * @property {"filled" | "subtle" | "transparent"} [variant]
  * @property {"primary" | "secondary" | "danger" | "warn" | "success" | "info"} [color]
  * @property {string[]} [additionalClasses]
+ * @property {boolean} [disabled]
  * @property {JSX.EventHandler<HTMLButtonElement, PointerEvent>} [onClick]
  */
 
@@ -22,6 +23,7 @@ export default function ActionIcon(props) {
       color: "secondary",
       variant: "transparent",
       additionalClasses: [],
+      disabled: false,
       onClick: (e) => {},
     },
     props
@@ -35,6 +37,7 @@ export default function ActionIcon(props) {
         prop(`color-${mergedProps.color}`, classes),
         ...mergedProps.additionalClasses
       )}
+      disabled={mergedProps.disabled}
       onClick={mergedProps.onClick}
     >
       {mergedProps.children}
diff --git a/src/components/ActionIcon/ActionIcon.module.css b/src/components/ActionIcon/ActionIcon.module.css
index 5731f2f..dfae743 100644
--- a/src/components/ActionIcon/ActionIcon.module.css
+++ b/src/components/ActionIcon/ActionIcon.module.css
@@ -1,3 +1,5 @@
+@import "@/mixins.css";
+
 .action-icon-button {
   --size: calc(var(--border-radius-xxs) * 2);
   border: none;
@@ -18,12 +20,34 @@
       &.variant-transparent {
         color: var(--color-#{$color});
         background-color: transparent;
+        &[disabled] {
+          color: var(--palette-gray-4);
+          @include dark-mode {
+            color: var(--palette-gray-8);
+          }
+        }
       }
       &.variant-subtle {
         background-color: color-mod(var(--color-#{$color}) a(50%));
+        &[disabled] {
+          color: var(--palette-gray-4);
+          background-color: color-mod(var(--palette-gray-6) a(50%));
+          @include dark-mode {
+            color: var(--palette-gray-8);
+            background-color: color-mod(var(--palette-gray-6) a(50%));
+          }
+        }
       }
       &.variant-fill {
         background-color: var(--color-#{$color});
+        &[disabled] {
+          color: var(--palette-gray-4);
+          background-color: var(--palette-gray-6);
+          @include dark-mode {
+            color: var(--palette-gray-8);
+            background-color: var(--palette-gray-6);
+          }
+        }
       }
       &:hover {
         color: var(--palette-white-0);
@@ -48,4 +72,9 @@
       }
     }
   }
+  &[disabled] {
+    border: none;
+    background: none;
+    pointer-events: none;
+  }
 }