fix(checkbox): 🩹 use separate variable for input

Author: navin-moorthy

src/icons/CaretRight.tsx

@@ -5,10 +5,10 @@ export const CaretRightIcon = createIcon({
   viewBox: "0 0 12 12",
   path: (
     <path
-      fill="currentColor"
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M4.026 1.805a.65.65 0 0 1 .919-.03l4 3.75a.65.65 0 0 1 0 .95l-4 3.75a.65.65 0 0 1-.89-.95L7.55 6 4.056 2.724a.65.65 0 0 1-.03-.919Z"
+      d="M4.027 1.807a.65.65 0 0 1 .92-.03l4 3.75a.65.65 0 0 1 0 .949l-4 3.75a.65.65 0 0 1-.89-.949l3.494-3.275-3.494-3.276a.65.65 0 0 1-.03-.919Z"
+      fill="currentColor"
     />
   ),
 });

src/input/InputProps.tsx

@@ -65,19 +65,14 @@ export const useInputProps = ({
   const inputInlineStyles = React.useRef<Record<string, any>>({});
   let prefixRef = React.useRef<HTMLElement>(null);
   let suffixRef = React.useRef<HTMLElement>(null);
-  prefixRef = useForkRef(
-    prefixRef,
-    componentProps?.prefixProps?.ref,
-  ) as unknown as React.RefObject<HTMLElement>;
-  suffixRef = useForkRef(
-    suffixRef,
-    componentProps?.suffixProps?.ref,
-  ) as unknown as React.RefObject<HTMLElement>;
+
   useSafeLayoutEffect(() => {
     let key = "";
 
     const prefixElement = prefixRef.current;
+    console.log("%cprefixElement", "color: #007300", prefixElement);
     const suffixElement = suffixRef.current;
+    console.log("%csuffixElement", "color: #006dcc", suffixElement);
     if (uiProps.prefix && prefixElement) {
       key = "paddingLeft";
 
@@ -118,26 +113,34 @@ export const useInputProps = ({
     [componentProps.baseProps, disabled, restProps, uiProps],
   );
 
+  const _prefixRef = useForkRef(
+    prefixRef,
+    componentProps?.prefixProps?.ref,
+  ) as unknown as React.RefObject<HTMLElement>;
   const prefixProps: InputPrefixProps = React.useMemo(
     () => ({
       ...uiProps,
       disabled,
       ...componentProps.prefixProps,
-      ref: prefixRef,
+      ref: _prefixRef,
       children: withIconA11y(uiProps.prefix, uiProps),
     }),
-    [componentProps.prefixProps, disabled, uiProps],
+    [_prefixRef, componentProps.prefixProps, disabled, uiProps],
   );
 
+  const _suffixRef = useForkRef(
+    suffixRef,
+    componentProps?.suffixProps?.ref,
+  ) as unknown as React.RefObject<HTMLElement>;
   const suffixProps: InputSuffixProps = React.useMemo(
     () => ({
       ...uiProps,
       disabled,
       ...componentProps.suffixProps,
-      ref: suffixRef,
+      ref: _suffixRef,
       children: uiProps.suffix,
     }),
-    [componentProps.suffixProps, disabled, uiProps],
+    [componentProps.suffixProps, _suffixRef, disabled, uiProps],
   );
 
   return {

src/theme/defaultTheme/input.ts

@@ -106,9 +106,9 @@ export const input = {
     },
     underline: {
       default: {
-        base: "text-gray-800 placeholder:text-gray-600 border border-x-transparent border-t-transparent border-b-gray-400 rounded-none px-0.5",
-        prefix: "text-gray-600",
-        suffix: "text-gray-600",
+        base: "text-gray-800 placeholder:text-gray-600 border border-x-transparent border-t-transparent border-b-gray-400 rounded-none",
+        prefix: "text-gray-600 pl-0",
+        suffix: "text-gray-600 pr-0",
       },
       hover: {
         base: "hover:placeholder:text-gray-700 hover:border-b-gray-500",