From d3ea9fbd4ad572077cc0c356706696b8bee655fd Mon Sep 17 00:00:00 2001
From: Jared Scott <jared.scott@variable.team>
Date: Tue, 9 Apr 2024 19:25:10 +0800
Subject: [PATCH] fix: Some Tailwind classes for inputswitch and checkbox as
 styling is currently broken

- Update the tailwinddoc.js files for checkbox and inputswitch
---
 components/doc/checkbox/theming/tailwinddoc.js    | 13 ++++++++-----
 components/doc/inputswitch/theming/tailwinddoc.js |  5 ++++-
 components/lib/passthrough/tailwind/index.js      |  8 +++++++-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/doc/checkbox/theming/tailwinddoc.js b/components/doc/checkbox/theming/tailwinddoc.js
index 802541acfc..c7393922bc 100644
--- a/components/doc/checkbox/theming/tailwinddoc.js
+++ b/components/doc/checkbox/theming/tailwinddoc.js
@@ -5,13 +5,16 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
-const Tailwind = {        
+const Tailwind = {
     checkbox: {
         root: {
-            className: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        input: ({ props, context }) => ({
-            className: [
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props, context }) => ({
+            className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
                 {
@@ -22,7 +25,7 @@ const Tailwind = {
                     'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
                     'cursor-default opacity-60': props.disabled
                 }
-            ]
+            )
         }),
         icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
     }
diff --git a/components/doc/inputswitch/theming/tailwinddoc.js b/components/doc/inputswitch/theming/tailwinddoc.js
index cabaaf18f7..937f3bbafc 100644
--- a/components/doc/inputswitch/theming/tailwinddoc.js
+++ b/components/doc/inputswitch/theming/tailwinddoc.js
@@ -5,13 +5,16 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
-const Tailwind = {   
+const Tailwind = {
     inputswitch: {
         root: ({ props }) => ({
             className: classNames('inline-block relative', 'w-12 h-7', {
                 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
         slider: ({ props }) => ({
             className: classNames(
                 'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 2c9f51575f..70bcfbbae8 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -840,6 +840,9 @@ const Tailwind = {
                 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
         slider: ({ props }) => ({
             className: classNames(
                 'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
@@ -1048,7 +1051,10 @@ const Tailwind = {
         root: {
             className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        input: ({ props, context }) => ({
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props, context }) => ({
             className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',