From 72d7922af698288d0bc507c11f70125506b7d193 Mon Sep 17 00:00:00 2001
From: hafsahayath <44601750+hafsahayath@users.noreply.github.com>
Date: Mon, 18 Jul 2022 11:15:00 +0530
Subject: [PATCH 1/2] refactor: extend switch component

---
 .../src/components/Switch/switch.types.ts                   | 5 +++++
 lib/src/components/Switch/Switch.tsx                        | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 examples/vanilla-extract-react/src/components/Switch/switch.types.ts

diff --git a/examples/vanilla-extract-react/src/components/Switch/switch.types.ts b/examples/vanilla-extract-react/src/components/Switch/switch.types.ts
new file mode 100644
index 0000000..633e678
--- /dev/null
+++ b/examples/vanilla-extract-react/src/components/Switch/switch.types.ts
@@ -0,0 +1,5 @@
+export interface ISwitchProps {
+  status: boolean;
+  onChange: React.Dispatch<React.SetStateAction<boolean>>;
+  isDisabled?: boolean;
+}
\ No newline at end of file
diff --git a/lib/src/components/Switch/Switch.tsx b/lib/src/components/Switch/Switch.tsx
index 5e23d5c..4a70e43 100644
--- a/lib/src/components/Switch/Switch.tsx
+++ b/lib/src/components/Switch/Switch.tsx
@@ -2,14 +2,18 @@ import { slider, switchInputStyle, switchLayout } from "./switch.css";
 import { ISwitchProps } from "./switch.types";
 import "./switch-global-styles.css";
 
+type SwitchProps = ISwitchProps & JSX.IntrinsicElements["input"];
+
 export const Switch = ({
   status,
   onChange,
   isDisabled = false,
-}: ISwitchProps) => {
+  ...nativeProps
+}: SwitchProps) => {
   return (
     <label className={switchLayout}>
       <input
+        {...nativeProps}
         className={switchInputStyle}
         type="checkbox"
         checked={status}

From 7428b1f2267938e493428de9161d99426e0d9e33 Mon Sep 17 00:00:00 2001
From: hafsahayath <44601750+hafsahayath@users.noreply.github.com>
Date: Mon, 18 Jul 2022 16:59:35 +0530
Subject: [PATCH 2/2] refactor: destructure className

---
 lib/src/components/Switch/Switch.tsx      | 3 ++-
 lib/src/components/Switch/switch.types.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/src/components/Switch/Switch.tsx b/lib/src/components/Switch/Switch.tsx
index 4a70e43..b1214bc 100644
--- a/lib/src/components/Switch/Switch.tsx
+++ b/lib/src/components/Switch/Switch.tsx
@@ -8,13 +8,14 @@ export const Switch = ({
   status,
   onChange,
   isDisabled = false,
+  className = "",
   ...nativeProps
 }: SwitchProps) => {
   return (
     <label className={switchLayout}>
       <input
         {...nativeProps}
-        className={switchInputStyle}
+        className={`${switchInputStyle} ${className}`}
         type="checkbox"
         checked={status}
         onChange={(e) => onChange(e.target.checked)}
diff --git a/lib/src/components/Switch/switch.types.ts b/lib/src/components/Switch/switch.types.ts
index 633e678..3585921 100644
--- a/lib/src/components/Switch/switch.types.ts
+++ b/lib/src/components/Switch/switch.types.ts
@@ -2,4 +2,5 @@ export interface ISwitchProps {
   status: boolean;
   onChange: React.Dispatch<React.SetStateAction<boolean>>;
   isDisabled?: boolean;
+  className?: string;
 }
\ No newline at end of file