Reshaped Card

import { Checkbox, Reshaped, Text, useToggle, View } from "reshaped/bundle";
import Card from "@/components/ui/reshaped-card";

function Component() {
  const selected = useToggle(true);
  return (
    <Card as="label" selected={selected.active}>
      <View gap={3} direction="row" align="center">
        <Checkbox
          value="dog"
          checked={selected.active}
          onChange={({ checked }) =>
            checked ? selected.activate() : selected.deactivate()
          }
          name="animal"
        />
        <View.Item grow>
          <Text variant="body-1" weight="medium">
            Dog
          </Text>
          <Text variant="body-2" color="neutral-faded">
            The dog is a domesticated animal of the family Canidae.
          </Text>
        </View.Item>
      </View>
    </Card>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 520, width: "100%", margin: "0 auto", padding: 24 }}>
        <Component />
      </div>
    </Reshaped>
  );
}