From fae887670a15f0d8e8b73921bd09575eeff6be91 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Thu, 11 Sep 2025 14:57:15 +0900
Subject: [PATCH] Fix Toggle ui

---
 .changeset/four-plants-jam.md                 |  5 ++++
 .../__snapshots__/index.browser.test.tsx.snap | 24 +++++++++----------
 .../src/components/Toggle/index.tsx           |  2 +-
 3 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/four-plants-jam.md

diff --git a/.changeset/four-plants-jam.md b/.changeset/four-plants-jam.md
new file mode 100644
index 00000000..8be02bd4
--- /dev/null
+++ b/.changeset/four-plants-jam.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Fix toggle ui
diff --git a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
index 2013a32a..784024f7 100644
--- a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Toggle > should Toggle snapshot 1`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
     role="group"
   >
     <div
@@ -21,7 +21,7 @@ exports[`Toggle > should Toggle snapshot 2`] = `
 <div>
   <div
     aria-disabled="true"
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
     role="group"
   >
     <div
@@ -38,7 +38,7 @@ exports[`Toggle > should Toggle snapshot 2`] = `
 exports[`Toggle > should Toggle snapshot 3`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
     role="group"
   >
     <div
@@ -55,7 +55,7 @@ exports[`Toggle > should Toggle snapshot 3`] = `
 exports[`Toggle > should Toggle snapshot 4`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
     role="group"
   >
     <div
@@ -72,7 +72,7 @@ exports[`Toggle > should Toggle snapshot 4`] = `
 exports[`Toggle > should Toggle snapshot 5`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -90,7 +90,7 @@ exports[`Toggle > should Toggle snapshot 6`] = `
 <div>
   <div
     aria-disabled="true"
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -107,7 +107,7 @@ exports[`Toggle > should Toggle snapshot 6`] = `
 exports[`Toggle > should Toggle snapshot 7`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -124,7 +124,7 @@ exports[`Toggle > should Toggle snapshot 7`] = `
 exports[`Toggle > should Toggle snapshot 8`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -141,7 +141,7 @@ exports[`Toggle > should Toggle snapshot 8`] = `
 exports[`Toggle > should Toggle snapshot 9`] = `
 <div>
   <div
-    class="test-toggle-wrapper   border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class="test-toggle-wrapper   border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -158,7 +158,7 @@ exports[`Toggle > should Toggle snapshot 9`] = `
 exports[`Toggle > should Toggle snapshot 10`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
     role="group"
     style="background-color: blue;"
   >
@@ -177,7 +177,7 @@ exports[`Toggle > should Toggle snapshot 10`] = `
 exports[`Toggle > should Toggle snapshot 11`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
     role="group"
     style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
   >
@@ -196,7 +196,7 @@ exports[`Toggle > should Toggle snapshot 11`] = `
 exports[`Toggle > should Toggle snapshot 12`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
     role="group"
     style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
   >
diff --git a/packages/components/src/components/Toggle/index.tsx b/packages/components/src/components/Toggle/index.tsx
index 873c3fa6..ce601da6 100644
--- a/packages/components/src/components/Toggle/index.tsx
+++ b/packages/components/src/components/Toggle/index.tsx
@@ -68,7 +68,7 @@ export function Toggle({
         h={isDefault ? '28px' : '8px'}
         justifyContent={resultValue && 'flex-end'}
         onClick={() => !disabled && handleToggle(resultValue)}
-        p={!isDefault && 1}
+        p={isDefault && 1}
         position="relative"
         role="group"
         selectors={{