From 95f87b7f6183e0595b5164d10edc95ec2ed9ce7c Mon Sep 17 00:00:00 2001
From: Jared Scott <jared.scott@variable.team>
Date: Wed, 17 Apr 2024 20:23:12 +0800
Subject: [PATCH] fix: #6405 Fix Tailwind theme for TriStateCheckbox (#6406)

- add missing `ptm('input')` to `inputProps` for use on the `input` Element. This aligns with other Primereact components
- Fix default tailwind styling in `tailwind/index.js`
- Update the tailwinddoc.js files for TriStateCheckbox
---
 .../tristatecheckbox/theming/tailwinddoc.js   |  8 ++++--
 components/lib/passthrough/tailwind/index.js  |  8 ++++--
 .../lib/tristatecheckbox/TriStateCheckbox.js  | 25 +++++++++++--------
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/components/doc/tristatecheckbox/theming/tailwinddoc.js b/components/doc/tristatecheckbox/theming/tailwinddoc.js
index 95a0056c5a..eb8de34d98 100644
--- a/components/doc/tristatecheckbox/theming/tailwinddoc.js
+++ b/components/doc/tristatecheckbox/theming/tailwinddoc.js
@@ -10,7 +10,10 @@ const Tailwind = {
         root: {
             className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        checkbox: ({ props }) => ({
+        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 }) => ({
             className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
@@ -23,7 +26,8 @@ const Tailwind = {
                     '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/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 70bcfbbae8..6f30051293 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -1032,7 +1032,10 @@ const Tailwind = {
         root: {
             className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        checkbox: ({ props }) => ({
+        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 }) => ({
             className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
@@ -1045,7 +1048,8 @@ const Tailwind = {
                     'cursor-default opacity-60': props.disabled
                 }
             )
-        })
+        }),
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
     },
     checkbox: {
         root: {
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 60bde805d0..a977019910 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -144,17 +144,20 @@ export const TriStateCheckbox = React.memo(
             ptm('root')
         );
 
-        const inputProps = mergeProps({
-            id: props.inputId,
-            className: cx('input'),
-            type: 'checkbox',
-            'aria-invalid': props.invalid,
-            disabled: props.disabled,
-            readOnly: props.readOnly,
-            value: props.value,
-            checked: props.value,
-            onChange: onChange
-        });
+        const inputProps = mergeProps(
+            {
+                id: props.inputId,
+                className: cx('input'),
+                type: 'checkbox',
+                'aria-invalid': props.invalid,
+                disabled: props.disabled,
+                readOnly: props.readOnly,
+                value: props.value,
+                checked: props.value,
+                onChange: onChange
+            },
+            ptm('input')
+        );
 
         return (
             <>