From 70836dee02a17283ab746d4a89bb6ad7533f69dd Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Sun, 2 Jun 2024 22:17:22 +0900
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20useSwitch=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EB=A7=81=EB=B0=A9=EC=8B=9D=20vanilla-extract=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                   |  4 +-
 src/stories/useSwitch/Switch.css    | 62 --------------------------
 src/stories/useSwitch/Switch.css.ts | 68 +++++++++++++++++++++++++++++
 src/stories/useSwitch/Switch.tsx    |  9 ++--
 4 files changed, 74 insertions(+), 69 deletions(-)
 delete mode 100644 src/stories/useSwitch/Switch.css
 create mode 100644 src/stories/useSwitch/Switch.css.ts

diff --git a/package-lock.json b/package-lock.json
index 41398c3..987ab4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@rapiders/react-hooks",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@rapiders/react-hooks",
-      "version": "1.2.5",
+      "version": "1.2.6",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.24.4",
diff --git a/src/stories/useSwitch/Switch.css b/src/stories/useSwitch/Switch.css
deleted file mode 100644
index 30c9b9c..0000000
--- a/src/stories/useSwitch/Switch.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: #2196F3;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
\ No newline at end of file
diff --git a/src/stories/useSwitch/Switch.css.ts b/src/stories/useSwitch/Switch.css.ts
new file mode 100644
index 0000000..c0f9942
--- /dev/null
+++ b/src/stories/useSwitch/Switch.css.ts
@@ -0,0 +1,68 @@
+import { ComplexStyleRule, style } from '@vanilla-extract/css';
+
+/* The switch - the box around the slider */
+export const switchLabel = style({
+  position: 'relative',
+  display: 'inline-block',
+  width: 60,
+  height: 34,
+});
+
+export const switchCirble: ComplexStyleRule = {
+  position: 'absolute',
+  content: '',
+  height: 26,
+  width: 26,
+  left: 4,
+  bottom: 4,
+  backgroundColor: 'white',
+  WebkitTransition: '.4s',
+  transition: '.4s',
+};
+
+/* Hide default HTML checkbox */
+export const switchInput = style({
+  opacity: 0,
+  width: 0,
+  height: 0,
+});
+
+/* The slider */
+export const baseSlider = style({
+  position: 'absolute',
+  cursor: 'pointer',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: '#ccc',
+  WebkitTransition: '.4s',
+  transition: '.4s',
+  '::before': {
+    ...switchCirble,
+  },
+});
+
+export const checkedSlider = style({
+  backgroundColor: '#2196F3',
+  position: 'absolute',
+  cursor: 'pointer',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  '::before': {
+    ...switchCirble,
+    transform: 'translateX(26px)',
+    WebkitTransform: 'translateX(26px)',
+    msTransform: 'translateX(26px)',
+  },
+});
+
+/* Rounded sliders */
+export const round = style({
+  borderRadius: 34,
+  '::before': {
+    borderRadius: '50%',
+  },
+});
diff --git a/src/stories/useSwitch/Switch.tsx b/src/stories/useSwitch/Switch.tsx
index 77bb2f5..41a8033 100644
--- a/src/stories/useSwitch/Switch.tsx
+++ b/src/stories/useSwitch/Switch.tsx
@@ -1,7 +1,6 @@
 import useSwitch from '../../useSwitch/useSwitch';
 import React, { ChangeEventHandler } from 'react';
-
-import './Switch.css';
+import { baseSlider, checkedSlider, round, switchInput, switchLabel } from './Switch.css';
 
 export default function Switch() {
   const sw = useSwitch(false);
@@ -11,9 +10,9 @@ export default function Switch() {
   };
 
   return (
-    <label className="switch">
-      <input type="checkbox" checked={sw.isOn} onChange={handleChangeSwitch} />
-      <span className="slider round"></span>
+    <label className={switchLabel}>
+      <input type="checkbox" checked={sw.isOn} onChange={handleChangeSwitch} className={switchInput} />
+      <span className={`${sw.isOn ? checkedSlider : baseSlider} ${round}`}></span>
       check
     </label>
   );

From 8d3f1f3c0465c2db23b9585770b3e91d8e307b4c Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Sun, 2 Jun 2024 22:21:59 +0900
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20README=20useSwitch=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index 5e1ea83..3816285 100644
--- a/README.md
+++ b/README.md
@@ -157,6 +157,24 @@ function App() {
 
 `removeValue (function)`: A function that removes values related to the current key from the local storage.
 
+### useSwitch
+
+You can declaratively manage a Switch (or Toggle) component using useSwitch.
+
+#### Function Arguments
+
+You can determine the initial on/off state of the toggle through `defaultValue`.
+
+#### Return Values
+
+`isOn` (default `false`) : Indicates the state of the switch. If the switch is on, it returns `true`; otherwise, it returns `false`.
+
+`on` : Turns the switch to the on state.
+
+`off` : Turns the switch to the off state.
+
+`toggle` : Reverses the current state of the switch.
+
 ## Animation
 
 The animation of this package is based on ClassName by default.