Checkbox Card

import { Stack, Text } from "@chakra-ui/react"
import {
  CheckboxCardControl,
  CheckboxCardLabel,
  CheckboxCardRoot,
} from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <CheckboxCardRoot maxW="240px">
      <CheckboxCardControl>
        <Stack gap="0" flex="1">
          <CheckboxCardLabel>Next.js</CheckboxCardLabel>
          <Text color="fg.subtle">Best for apps</Text>
        </Stack>
      </CheckboxCardControl>
    </CheckboxCardRoot>
  )
}

import { CheckboxGroup, HStack, Stack, Text } from "@chakra-ui/react"
import {
  CheckboxCardControl,
  CheckboxCardLabel,
  CheckboxCardRoot,
} from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <CheckboxGroup width="full" defaultValue={["next"]}>
      <Text fontWeight="medium" mb="2">
        Select framework(s)
      </Text>
      <HStack mt="2" align="stretch" width="full">
        {items.map((item) => (
          <CheckboxCardRoot key={item.value} value={item.value} flex="1">
            <CheckboxCardControl>
              <Stack gap="0" flex="1">
                <CheckboxCardLabel>{item.title}</CheckboxCardLabel>
                <Text color="fg.subtle">{item.description}</Text>
              </Stack>
            </CheckboxCardControl>
          </CheckboxCardRoot>
        ))}
      </HStack>
    </CheckboxGroup>
  )
}

const items = [
  { value: "next", title: "Next.js", description: "Best for apps" },
  { value: "vite", title: "Vite", description: "Best for SPAs" },
  { value: "astro", title: "Astro", description: "Best for static sites" },
]

import { For, Stack } from "@chakra-ui/react"
import {
  CheckboxCardControl,
  CheckboxCardLabel,
  CheckboxCardRoot,
} from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <Stack maxW="320px">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <CheckboxCardRoot size={size}>
            <CheckboxCardControl>
              <CheckboxCardLabel>Checkbox ({size})</CheckboxCardLabel>
            </CheckboxCardControl>
          </CheckboxCardRoot>
        )}
      </For>
    </Stack>
  )
}

import { For, Stack } from "@chakra-ui/react"
import {
  CheckboxCardControl,
  CheckboxCardLabel,
  CheckboxCardRoot,
} from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <Stack maxW="320px">
      <For each={["subtle", "outline"]}>
        {(variant) => (
          <CheckboxCardRoot colorPalette="teal" variant={variant}>
            <CheckboxCardControl>
              <CheckboxCardLabel>Checkbox ({variant})</CheckboxCardLabel>
            </CheckboxCardControl>
          </CheckboxCardRoot>
        )}
      </For>
    </Stack>
  )
}

import { Stack, Text } from "@chakra-ui/react"
import {
  CheckboxCardControl,
  CheckboxCardLabel,
  CheckboxCardRoot,
} from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <CheckboxCardRoot disabled maxW="320px">
      <CheckboxCardControl>
        <Stack gap="0">
          <CheckboxCardLabel>Disabled</CheckboxCardLabel>
          <Text>This is a disabled checkbox</Text>
        </Stack>
      </CheckboxCardControl>
    </CheckboxCardRoot>
  )
}

import { Badge, HStack, Stack, Text } from "@chakra-ui/react"
import {
  CheckboxCardAddon,
  CheckboxCardControl,
  CheckboxCardLabel,
  CheckboxCardRoot,
} from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <CheckboxCardRoot width="300px">
      <CheckboxCardControl>
        <Stack gap="0" flex="1">
          <CheckboxCardLabel>With Addon</CheckboxCardLabel>
          <Text>Some description</Text>
        </Stack>
      </CheckboxCardControl>
      <CheckboxCardAddon>
        <HStack>
          Some supporting text
          <Badge variant="solid">New</Badge>
        </HStack>
      </CheckboxCardAddon>
    </CheckboxCardRoot>
  )
}

import { Box, Float, HStack, Text, VStack } from "@chakra-ui/react"
import {
  CheckboxCardControl,
  CheckboxCardGroup,
  CheckboxCardIndicator,
  CheckboxCardLabel,
  CheckboxCardRoot,
} from "@/components/ui/checkbox-card"
import { HiGlobeAlt, HiLockClosed, HiShieldCheck, HiUser } from "react-icons/hi"

const Demo = () => {
  return (
    <CheckboxCardGroup width="full" defaultValue={["Guest"]}>
      <HStack>
        {items.map((item) => (
          <CheckboxCardRoot
            variant="subtle"
            colorPalette="teal"
            flex="1"
            key={item.label}
          >
            <CheckboxCardControl showIndicator={false}>
              <VStack gap="1" flex="1" textAlign="center">
                <Box mb="2" css={{ "& svg": { fontSize: "2xl" } }}>
                  {item.icon}
                </Box>
                <CheckboxCardLabel color="inherit!">
                  {item.label}
                </CheckboxCardLabel>
                <Text fontSize="xs">{item.description}</Text>
              </VStack>
              <Float placement="top-end" offset="4">
                <CheckboxCardIndicator />
              </Float>
            </CheckboxCardControl>
          </CheckboxCardRoot>
        ))}
      </HStack>
    </CheckboxCardGroup>
  )
}

const items = [
  { icon: <HiShieldCheck />, label: "Admin", description: "Give full access" },
  { icon: <HiUser />, label: "User", description: "Give limited access" },
  {
    icon: <HiGlobeAlt />,
    label: "Guest",
    description: "Give read-only access",
  },
  { icon: <HiLockClosed />, label: "Blocked", description: "No access" },
]