From 5b8e7471e6b8dc0af68bf465b6ccc080e834cba1 Mon Sep 17 00:00:00 2001
From: Anshul Goel <anshul.go87@gmail.com>
Date: Fri, 21 Apr 2023 17:19:45 +0530
Subject: [PATCH 1/2] enable custom radio button using tailwind peer

---
 .../@holaplexui-playground/pages/form.tsx     | 27 +++++++++++++++++++
 .../@holaplexui-react/src/components/Form.tsx | 14 +++++-----
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/@holaplexui-playground/pages/form.tsx b/packages/@holaplexui-playground/pages/form.tsx
index ccb14ee..8de8a30 100644
--- a/packages/@holaplexui-playground/pages/form.tsx
+++ b/packages/@holaplexui-playground/pages/form.tsx
@@ -223,6 +223,33 @@ export default function App() {
             <Form.RadioGroup.Radio value='Mango' name='fruits' />
           </Form.Label>
         </Form.RadioGroup>
+
+        <Form.RadioGroup className='mt-5'>
+          <Form.Label
+            name='Red'
+            htmlFor='red'
+            peerClassName='peer-checked:text-red-500'
+          >
+            <Form.RadioGroup.Radio
+              id='red'
+              value='red'
+              name='color'
+              className='peer hidden'
+            />
+          </Form.Label>
+          <Form.Label
+            name='Green'
+            htmlFor='green'
+            peerClassName='peer-checked:text-green-500'
+          >
+            <Form.RadioGroup.Radio
+              id='green'
+              value='green'
+              name='color'
+              className='peer hidden'
+            />
+          </Form.Label>
+        </Form.RadioGroup>
       </Form>
     </div>
   );
diff --git a/packages/@holaplexui-react/src/components/Form.tsx b/packages/@holaplexui-react/src/components/Form.tsx
index 509ee96..ccbfa2c 100644
--- a/packages/@holaplexui-react/src/components/Form.tsx
+++ b/packages/@holaplexui-react/src/components/Form.tsx
@@ -32,6 +32,7 @@ interface FormLabelProps
   extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
   name: string;
   placement?: Placement;
+  peerClassName?: string;
   asideComponent?: JSX.Element;
 }
 
@@ -39,6 +40,7 @@ function FormLabel({
   name,
   placement = Placement.Top,
   asideComponent,
+  peerClassName,
   className,
   children,
   ...props
@@ -48,21 +50,21 @@ function FormLabel({
       className={clsx(
         'flex',
         {
-          'flex-col': placement === Placement.Top,
-          'flex-col-reverse': placement === Placement.Bottom,
-          'flex-row-reverse items-center': placement === Placement.Right,
-          'flex-row items-center': placement === Placement.Left,
+          'flex-col': placement === Placement.Bottom,
+          'flex-col-reverse': placement === Placement.Top,
+          'flex-row-reverse items-center': placement === Placement.Left,
+          'flex-row items-center': placement === Placement.Right,
         },
         'form-label',
         className
       )}
       {...props}
     >
-      <div className="flex w-full justify-between items-center">
+      {children}
+      <div className={clsx('flex w-full justify-between items-center', peerClassName)}>
         <span className="form-label-text">{name}</span>
         {asideComponent}
       </div>
-      {children}
     </label>
   );
 }

From 47cc17435648f1595ec7605ec34ba26806de71ef Mon Sep 17 00:00:00 2001
From: Anshul Goel <anshul.go87@gmail.com>
Date: Fri, 21 Apr 2023 20:15:11 +0530
Subject: [PATCH 2/2] update version

---
 packages/@holaplexui-react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
index 2e6ebde..3ede836 100644
--- a/packages/@holaplexui-react/package.json
+++ b/packages/@holaplexui-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [