From 001c6d9a6be0903711379467d36607d20605686d Mon Sep 17 00:00:00 2001
From: Arkadiusz Bachorski
 <60391032+arkadiuszbachorski@users.noreply.github.com>
Date: Tue, 14 Jan 2025 07:45:52 +0100
Subject: [PATCH] Add center allow disabling centering to SideLabel

---
 .../SideLabel/SideLabel.stories.tsx           | 21 +++++++++++++++++++
 src/components/SideLabel/SideLabel.tsx        | 15 ++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/SideLabel/SideLabel.stories.tsx b/src/components/SideLabel/SideLabel.stories.tsx
index 088dd06..9ad7f50 100644
--- a/src/components/SideLabel/SideLabel.stories.tsx
+++ b/src/components/SideLabel/SideLabel.stories.tsx
@@ -29,6 +29,27 @@ export const Reversed = () => (
   </SideLabel>
 )
 
+const complexLabel = (
+  <>
+    <h2 className="mb-2 font-bold">Lorem</h2>
+    <p className="font-light">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+    </p>
+  </>
+)
+
+export const Complex = () => (
+  <SideLabel label={complexLabel}>
+    <Switch />
+  </SideLabel>
+)
+
+export const ComplexNonCentered = () => (
+  <SideLabel label={complexLabel} center={false}>
+    <Switch />
+  </SideLabel>
+)
+
 export const NoInput = () => (
   <SideLabel label="Check me">
     <span className="hidden">input goes here</span>
diff --git a/src/components/SideLabel/SideLabel.tsx b/src/components/SideLabel/SideLabel.tsx
index 0909746..595c8d9 100644
--- a/src/components/SideLabel/SideLabel.tsx
+++ b/src/components/SideLabel/SideLabel.tsx
@@ -11,8 +11,15 @@ import { cn } from '../../utils/className'
 
 type SideLabelProps = Omit<HTMLProps<HTMLLabelElement>, 'label'> & {
   label?: ReactNode
-  /* Show label on right side */
+  /**
+   * Show label on right side
+   * */
   reverse?: boolean
+  /**
+   * Center content vertically
+   * @default true
+   * */
+  center?: boolean
 }
 
 /**
@@ -23,17 +30,19 @@ export const SideLabel = ({
   className,
   label,
   reverse,
+  center = true,
   ...props
 }: SideLabelProps) => (
   <label
     className={cn(
-      'flex cursor-pointer select-none items-center gap-2.5',
+      'flex cursor-pointer select-none gap-2.5',
       reverse && 'flex-row-reverse',
+      center && 'items-center',
       className,
     )}
     {...props}
   >
-    <div className="mt-1">{children}</div>
+    {children}
     <div className="text-sm leading-none">{label}</div>
   </label>
 )