Initial commit

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

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