[#10] Checkbox component

panda.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from '@pandacss/dev';
 import { avatarSlotRecipe } from '@/components/ui/avatar/AvatarSlotRecipe';
 import { Tooltip } from '@/components/ui/tooltip/TooltipRecipe';
 import { buttonRecipe } from '@/components/ui/button/ButtonRecipe';
+import { checkboxSlotRecipe } from '@/components/ui/checkbox/CheckboxSlotRecipe';
 import { selectRecipe } from '@/components/ui/select/SelectRecipe';
 
 export default defineConfig({
@@ -13,6 +14,7 @@ export default defineConfig({
     extend: {
       slotRecipes: {
         avatar: avatarSlotRecipe,
+        checkbox: checkboxSlotRecipe,
       },
       recipes: {
         tooltip: Tooltip,

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Container, Flex } from '@/styled/jsx';
-import { Button } from '@/components/ui';
+import { Button, Checkbox } from '@/components/ui';
 
 export default function Home() {
   return (
@@ -15,6 +15,7 @@ export default function Home() {
         <Button colorPalette="red" variant="ghost">
           Button
         </Button>
+        <Checkbox disabled>kacs</Checkbox>
       </Flex>
     </Container>
   );

src/components/ui/checkbox/Checkbox.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+import { Checkbox as ArkCheckbox } from '@ark-ui/react/checkbox';
+import { css, cx } from '@/styled/css';
+import { checkbox } from '@/styled/recipes';
+import { CheckboxProps } from '@/components/ui/checkbox/interface';
+import { CheckIcon, MinusIcon } from '@/components/ui/icons';
+
+/**
+ * Render Checkbox component.
+ * @param {ReactNode} children - The label of the checkbox.
+ * @returns {JSX.Element} - A checkbox component.
+ */
+export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {
+  const [variantProps, localProps] = checkbox.splitVariantProps(props);
+  const { children, ...rootProps } = localProps;
+  const styles = checkbox(variantProps);
+
+  return (
+    <ArkCheckbox.Root ref={ref} className={cx(styles.root, css(rootProps))} {...rootProps}>
+      {(state) => (
+        <>
+          <ArkCheckbox.Control className={styles.control}>
+            {state.isChecked && <CheckIcon />}
+            {state.isIndeterminate && <MinusIcon />}
+          </ArkCheckbox.Control>
+          {children && <ArkCheckbox.Label className={styles.label}>{children}</ArkCheckbox.Label>}
+        </>
+      )}
+    </ArkCheckbox.Root>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';

src/components/ui/checkbox/CheckboxSlotRecipe.tsx

@@ -0,0 +1,28 @@
+import { checkboxAnatomy } from '@ark-ui/anatomy';
+import { defineSlotRecipe } from '@pandacss/dev';
+
+/**
+ * Update styles for Checkbox component.
+ */
+export const checkboxSlotRecipe = defineSlotRecipe({
+  className: 'checkbox',
+  slots: checkboxAnatomy.keys(),
+  base: {
+    root: {
+      display: 'inline-flex',
+      cursor: 'pointer',
+      _disabled: {
+        cursor: 'not-allowed',
+      },
+    },
+    control: {
+      _disabled: {
+        cursor: 'not-allowed',
+        opacity: '0.6',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

src/components/ui/checkbox/index.ts

@@ -0,0 +1,4 @@
+import { Checkbox } from './Checkbox';
+import { checkboxSlotRecipe } from './CheckboxSlotRecipe';
+
+export { Checkbox, checkboxSlotRecipe };

src/components/ui/checkbox/interface.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type CheckboxProps as ArkCheckboxProps } from '@ark-ui/react/checkbox';
+import { type CheckboxVariantProps } from '@/styled/recipes';
+import type { HTMLStyledProps } from '@/styled/types';
+
+export interface CheckboxProps
+  extends ArkCheckboxProps,
+    CheckboxVariantProps,
+    Omit<HTMLStyledProps<'label'>, 'defaultChecked' | 'dir' | 'translate' | 'content' | 'color'> {
+  /*
+    "children" is an optional property to display the checkbox's label.
+  */
+  children?: ReactNode;
+}

src/components/ui/icons/check-icon.tsx

@@ -0,0 +1,11 @@
+export const CheckIcon = () => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

src/components/ui/icons/index.ts

@@ -1,5 +1,6 @@
 import { UserIcon } from './user-icon';
+import { CheckIcon } from './check-icon';
+import { MinusIcon } from './minus-icon';
 import { DownIcon } from './down-icon';
 
-export { UserIcon };
-export { DownIcon };
+export { UserIcon, CheckIcon, MinusIcon, DownIcon };

src/components/ui/icons/minus-icon.tsx

@@ -0,0 +1,5 @@
+export const MinusIcon = () => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.91675 7H11.0834" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);

src/components/ui/index.ts

@@ -1,4 +1,5 @@
 export * from './button';
-export { Avatar } from './avatar';
+export * from './avatar';
+export * from './checkbox';
 export * from './select';
 export * from './tooltip';