gg

src/components/ui/forms/checkbox-card.tsx

@@ -1,5 +1,5 @@
-import { CheckboxCard as ChakraCheckboxCard } from '@chakra-ui/react';
-import * as React from 'react';
+import { CheckboxCard as ChakraCheckboxCard } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface CheckboxCardProps extends ChakraCheckboxCard.RootProps {
   icon?: React.ReactElement;
@@ -7,11 +7,14 @@ export interface CheckboxCardProps extends ChakraCheckboxCard.RootProps {
   description?: React.ReactNode;
   addon?: React.ReactNode;
   indicator?: React.ReactNode | null;
-  indicatorPlacement?: 'start' | 'end' | 'inside';
+  indicatorPlacement?: "start" | "end" | "inside";
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 
-export const CheckboxCard = React.forwardRef<HTMLInputElement, CheckboxCardProps>(function CheckboxCard(props, ref) {
+export const CheckboxCard = React.forwardRef<
+  HTMLInputElement,
+  CheckboxCardProps
+>(function CheckboxCard(props, ref) {
   const {
     inputProps,
     label,
@@ -19,27 +22,35 @@ export const CheckboxCard = React.forwardRef<HTMLInputElement, CheckboxCardProps
     icon,
     addon,
     indicator = <ChakraCheckboxCard.Indicator />,
-    indicatorPlacement = 'end',
+    indicatorPlacement = "end",
     ...rest
   } = props;
 
   const hasContent = label || description || icon;
-  const ContentWrapper = indicator ? ChakraCheckboxCard.Content : React.Fragment;
+  const ContentWrapper = indicator
+    ? ChakraCheckboxCard.Content
+    : React.Fragment;
 
   return (
     <ChakraCheckboxCard.Root {...rest}>
       <ChakraCheckboxCard.HiddenInput ref={ref} {...inputProps} />
       <ChakraCheckboxCard.Control>
-        {indicatorPlacement === 'start' && indicator}
+        {indicatorPlacement === "start" && indicator}
         {hasContent && (
           <ContentWrapper>
             {icon}
-            {label && <ChakraCheckboxCard.Label>{label}</ChakraCheckboxCard.Label>}
-            {description && <ChakraCheckboxCard.Description>{description}</ChakraCheckboxCard.Description>}
-            {indicatorPlacement === 'inside' && indicator}
+            {label && (
+              <ChakraCheckboxCard.Label>{label}</ChakraCheckboxCard.Label>
+            )}
+            {description && (
+              <ChakraCheckboxCard.Description>
+                {description}
+              </ChakraCheckboxCard.Description>
+            )}
+            {indicatorPlacement === "inside" && indicator}
           </ContentWrapper>
         )}
-        {indicatorPlacement === 'end' && indicator}
+        {indicatorPlacement === "end" && indicator}
       </ChakraCheckboxCard.Control>
       {addon && <ChakraCheckboxCard.Addon>{addon}</ChakraCheckboxCard.Addon>}
     </ChakraCheckboxCard.Root>