From dc411987bfb5c0fc6fab60ca904dd508b0c8da5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 24 Jan 2025 09:00:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E5=AF=B9=E4=BA=8E=E9=A2=9D=E5=A4=96=E9=85=8D=E7=BD=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=9A=84=E6=94=AF=E6=8C=81=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HSegmentedControl.tsx | 10 ++++++++--
 src/components/VSegmentedControl.tsx | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/HSegmentedControl.tsx b/src/components/HSegmentedControl.tsx
index f45f169..e7d49fd 100644
--- a/src/components/HSegmentedControl.tsx
+++ b/src/components/HSegmentedControl.tsx
@@ -8,9 +8,15 @@ type HSegmentedControlProps = {
   options?: Option[];
   value?: Option['value'];
   onChange?: (value: Option['value']) => void;
+  extendClassName?: HTMLDivElement['className'];
 };
 
-export function HSegmentedControl({ options = [], value, onChange }: HSegmentedControlProps) {
+export function HSegmentedControl({
+  options = [],
+  value,
+  onChange,
+  extendClassName,
+}: HSegmentedControlProps) {
   const [selected, setSelected] = useState(value ?? options[0].value ?? null);
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderWidth, setSliderWidth] = useState(0);
@@ -28,7 +34,7 @@ export function HSegmentedControl({ options = [], value, onChange }: HSegmentedC
   }, []);
 
   return (
-    <div className={styles.segmented_control}>
+    <div className={cx(styles.segmented_control, extendClassName)}>
       <div className={styles.options}>
         {options.map((option, index) => (
           <div
diff --git a/src/components/VSegmentedControl.tsx b/src/components/VSegmentedControl.tsx
index b358837..191e341 100644
--- a/src/components/VSegmentedControl.tsx
+++ b/src/components/VSegmentedControl.tsx
@@ -8,9 +8,15 @@ type VSegmentedControlProps = {
   options?: Option[];
   value?: Option['value'];
   onChange?: (value: Option['value']) => void;
+  extendClassName?: HTMLDivElement['className'];
 };
 
-export function VSegmentedControl({ options = [], value, onChange }: VSegmentedControlProps) {
+export function VSegmentedControl({
+  options = [],
+  value,
+  onChange,
+  extendClassName,
+}: VSegmentedControlProps) {
   const [selected, setSelected] = useState(value ?? options[0].value ?? null);
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderHeight, setSliderHeight] = useState(0);
@@ -28,7 +34,7 @@ export function VSegmentedControl({ options = [], value, onChange }: VSegmentedC
   }, []);
 
   return (
-    <div className={styles.segmented_control}>
+    <div className={cx(styles.segmented_control, extendClassName)}>
       <div className={styles.options}>
         {options.map((option, index) => (
           <div